jQuery mouseup() with Examples

jQueryWeb DevelopmentFront End Technology

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

Syntax

The syntax is as follows−

$(selector).mousedown(func)

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

Example

Let us now see an example to implement the jQuery mouseup() 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").mouseup(function(){
         alert("Mouse left released");
      });
   });
</script>
</head>
<body>
<h2>Press Here</h2>
</body>
</html>

Output

This will produce the following output−

On mouse press and release−

raja
Published on 30-Dec-2019 07:17:16
Advertisements