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.
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.
Leave a Reply