mousedown()

The mousedown() method adds an event handler function to an HTML element. This function is executed, when the left mouse button is pressed down, at the time while the mouse is over the HTML element.

This event is generally used together with mouseup() event.

Syntax:

snippet

$(selector).mousedown()

It triggers the mousedown event for selected elements.

snippet

$(selector).mousedown(function)

It adds a function to the mousedown event.

Parameters of jQuery mousedown() event

Parameter	Description
Function	It is an optional parameter. It executes itself when the mousedown event is triggered.

Example of jQuery mousedown() event

Let's take an example to demonstrate jQuery mousedown() event.

snippet

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#h1").mousedown(function(){  
       $( "div" ).text( "mouse down event triggered" ).show().fadeOut( 2000 ); 
    });  
});  
</script>  
</head>  
<body>  
<h1 id="h1">Enter this heading.</h1> 
<div></div> 
</body>  
</html>

Output:

Enter this heading.

jQuery mousedown() event example 2

Let's see another example of jQuery mousedown() event.

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mousedown(function(){
        $("p").css("background-color", "blue");
    });
    $("p").mouseup(function(){
        $("p").css("background-color", "lightyellow");
    });
});
</script>
</head>
<body>
<p>Press down the mouse left button over this p element</p>
</body>
</html>

Output:

Press down the mouse left button over this p element