BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery mousedown() Method

By Chaitanya Singh | Filed Under: jQuery

jQuery mousedown() Method associates an event handler function to the html elements. This event handler function is executed when any of the mouse button (left, right or middle) is pressed down on an html element.

jQuery mousedown() Method Syntax

$(selector).mousedown(function(){
    //event handler function
});

Here $(selector) is a jQuery selector to select html elements that are attached to the event handler function using mousedown() method.

jQuery mousedown() Example

In the following example we have attached the event handler function to the paragraphs using jQuery element name selector and mousedown() method.

When any of the mouse button is pressed on any of the paragraph, the paragraph will be hidden. This is the custom logic that we have written in the event handler function, where we are hiding the current html element using hide() method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").mousedown(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<h2>jQuery mousedown event example</h2>
<p>This example is published on beginnersbook.com.</p>
<p>These paragraphs will disappear when the mouse button is
clicked, while the mouse pointer is over these paragraphs.</p>
</body>
</html>

Output:
Before mouse button is pressed down on a paragraph:
This is the initially loaded page where we have not clicked on any of the html elements.
jQuery mousedown Method
After mouse button is pressed down on a paragraph:
This screenshot is taken after we have clicked on the second paragraph of the document, as you can see the second paragraph is disappeared.
jQuery mousedown event

❮ PreviousNext ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap