Event jQuery Mousedown() By Example

Event jQuery mousedown() – how to use mousedown event with html elements. We are going to show you with simple example how to use mousedown event.

jQuery mousedown()

The jQuery mousedown event occurs when the left mouse button is pressed down over the selected element.

In otherwords, when the mouse button is pressed down, at the time while the mouse is over the HTML element. This trigger mousedown event on html elements.

Syntax

$(selector).mousedown()  

This triggers the mousedown event for selected elements.

$(selector).mousedown(function)  

Parameters

  • Function :- It is an optional parameter. This executes itself when the mousedown event is triggered.

Examples of jQuery mousedown() event

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.

Be First to Comment

Leave a Reply

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