jQuery mousedown() with Examples

jQuery Web Development Front End Technology

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>