mouseup()

The mouseup() method adds an event handler function to an HTML element. This function is executed, when the left mouse button is released after pressing mouse button on the HTML element.

The mouseup () event occurs when you release the pressed button of your mouse over a selected element. Once the mouseup() event is occurred it executes the mouseup() method attached with a function to run.

This event is generally used together with mousedown() event.

Syntax:

snippet

$(selector).mouseup()

It triggers the mouseup event for selected elements.

snippet

$(selector).mouseup(function)

It adds a function to the mouseup event.

Parameters of jQuery mouseup() event

Parameter	Description
Function	It is an optional parameter. It executes itself when the mouseup event is triggered.

Example of jQuery mouseup() event

Let's take an example to demonstrate jQuery mouseup() event.

snippet

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#h1").mouseup(function(){  
       $( "div" ).text( "Bye Bye... mouse up event triggered" ).show().fadeOut( 2000 ); 
    });  
});  
</script>  
</head>  
<body>  
<h1 id="h1">Enter this heading.</h1> 
<div></div> 
</body>  
</html>

Output:

Enter this heading.

jQuery mouseup() event example 2

Let's see another example of jQuery mouseup() event.

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mousedown(function(){
        $("p").css("background-color", "pink");
    });
    $("p").mouseup(function(){
        $("p").css("background-color", "yellowgreen");
    });
});
</script>
</head>
<body>
<p>Press down and release the mouse left button over this div element</p>
</body>
</html>

Output:

Press down and release the mouse left button over this div element