jQuery mousedown() with Examples


The mousedown() method in jQuery is used to trigger the mousedown event. The event occurs when the left mouse button is pressed down over the selected element.

Syntax

The syntax is as follows −

$(selector).mousedown(func)

Above, func is the function to run when mousedown event triggers.

Example

Let us now see an example to implement the jQuery mousedown() method −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("h2").mouseup(function(){
         $(this).after("<p>Mouse up (mouse button is released).</p>");
      });
      $("h2").mousedown(function(){
         $(this).after("<p>Mouse down (mouse button is pressed down).</p>");
      });
   });
</script>
</head>
<body>
<h2>Press Here</h2>
</body>
</html>

Output

This will produce the following output−

On pressing the mouse button and releasing, the following will be visible

Example

Let us now see another example −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("h2").mousedown(function(){
         alert("Mouse left pressed");
      });
   });
</script>
</head>
<body>
<h2>Press Here</h2>
</body>
</html>

Output

This will produce the following output−

Now, when mouse left key is pressed−

Updated on: 30-Dec-2019

259 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements