jQuery mouseup() with Examples


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−

Updated on: 30-Dec-2019

217 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements