jQuery mousedown() event method; Through this tutorial, you will learn how to use mouse down event with HTML elements.
jQuery Mousedown() Event Method with Example
The jQuery mousedown event takes place when the left mouse button is pressed down while positioned over the selected element. This event is triggered as soon as the mouse button is initially pressed down, without waiting for its release. It’s a useful event for capturing the beginning of a click interaction or for enabling behaviors that should activate upon the start of a mouse click.
Syntax of jQuery Mousedown() Event Method
Here is syntax of the mousedown event:
$(selector).mousedown()
This triggers the mousedown event for selected elements.
$(selector).mousedown(function)
Parameters of jQuery Mousedown() Event Method
- Function :- It is an optional parameter. This executes itself when the mousedown event is triggered.
Examples of jQuery Mousedown() Event Method
Let’s see example 1 of the mousedown event.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#first").mousedown(function(){
$( "span" ).text( "mouse down event triggered" ).show().fadeOut( 2000 );
});
});
</script>
</head>
<body>
<h1 id="first">Click Me.!!</h1>
<span></span>
</body>
</html>
In this above mousedown example 1, you can see that mousedown() event is triggered when you mouse cursor pointer on html elements and click mouse button. The mousedown event trigger and appear some text.
Let’s see example 2 of mousedown event.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mouse Down Event</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#second").mousedown(function(){
$( this ).text("Mouse Down Triggered");
});
});
</script>
</head>
<body>
<div id="second">Click Here for Preview</div>
</body>
</html>
In this mousedown event example 2, you can see that mousedown() event is triggered when you press on the element and a text message “Mouse Down Triggered” is displayed.
Recommended jQuery Tutorials
- jQuery | Event MouseUp () By Example
- Event jQuery Mouseleave By Example
- jQuery Event Mouseenter Example
- Event jQuery MouseOver() & MouseOut By Example
- keyup jquery event example
- Jquery Click() Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
