Updated April 3, 2023
Introduction to jQuery mouseup()
jQuery mouseup() method is used to handle the mouse button released event. The jQuery mouseup() method is a built-in method of jQuery. The jQuery mouseup() method accept an event handler function to an html element and this function is executed when the mouse button left button or right button or middle button is released (if any of the mouse buttons are released) after pressing (if any of the mouse button on the html element. The mouseup() event is generated when any of the mouse buttons are released because of the button pressed on the selected html element. When the mouseup() event is generated the mouseup() method executes the specified function to it. The mouseup() event is generally used with the mousedown() event.
Syntax:
The syntax of the jQuery mouseup() method is:
$(selector).mouseup()this method is used to handle the mouseup event for selected elements.
$(selector).mouseup(function)This method is used to accept a function to handle the mouseup event.
Parameter:
- Function: the function is an optional parameter, which is used to specify the name of the function which is to be executed to handle the mouseup event.
Examples of jQuery mouseup() using different method
Next, we write the html code to understand the jQuery mouseup() method more clearly with the following example.
Example #1
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery mouseup() method </title>
<!-- code to show the jQuery mouseup() working method -->
<script>
$(document).ready(function(){
$( "#bid" ).mouseup(function(){
$( "div" ).text( "The Mouse left button released event is generated. " );
});
});
</script>
</head>
<body>
<button id="bid"> Click here to generate mouseup event. </button>
<div></div>
</body>
</html>Output:
Once the Click button click, the output is –
In the above code, the mouseup() method is used. The use of the mouseup() method is to insert specified text when the event is generated and the event is generated when we click the button.
Example #2 – fadeOut( ) Method
Next, we rewrite the above code where the jQuery mouseup() method is used along with jQuery fadeOut( ) method, as shown in the below code –
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery mouseup() method </title>
<!-- code to show the jQuery mouseup() working method -->
<script>
$(document).ready(function(){
$( "#bid" ).mouseup(function(){
$( "div" ).text( "The Mouse left button released event is generated. " ).show().fadeOut( 2500 );
});
});
</script>
</head>
<body>
<button id="bid"> Click here to generate mouseup event. </button>
<div></div>
</body>
</html>Output:
Once the Click button click, the output is –
The above code use of the mouseup() method is to insert specified text when the event is generated and the text gets fade out after 2500 milliseconds.
Example #3 – mousedown() Method
Next example code where the jQuery mouseup() and jQuery mousedown() method used to differentiate their functionality –
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery mouseup() method </title>
<!-- code to show the jQuery mouseup() working method -->
<script>
$(document).ready(function(){
$( "h1" ).mousedown(function(){
$( "h1" ).css("background-color", "red");
});
$( "h1" ).mouseup(function(){
$( "h1" ).css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h1> Click here and generate mousedown and mouseup events. </h1>
</body>
</html>Output:
Once we click on the text, the output is –
In the above code, the mouseup() method and mousedown() method are used. When we click on the text the mouse down event is generated and executes the mousedown() method which changes the background color of the text to read and then releases the button the mouseup event is generated and then the mouseup() method is executed which change the background color of the text to yellow.
Example #4 – alert() Method
Next example code where the jQuery mouseup() use along with alert() method –
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery mouseup() method </title>
<!-- code to show the jQuery mouseup() working method -->
<script>
$(document).ready(function(){
$( "#bid" ).mouseup(function(){
alert( "Mouse button is released over a button" );
});
});
</script>
</head>
<body>
<h2> This is jQuery mouseup event example</h2>
<button id= "bid"> Click here to generate mouseup event </button>
</body>
</html>Output:
Once we click on the button, the output is –
Conclusion
The jQuery mouseup() method is a powerful method used to handle any mouse button released event, as we have learned with the examples. This method accepts the name of the function as a parameter, which is to be executed when the mouseup event is generated to the html element. Actually, the mouseup event is generated when any button of the mouse is released which is because of pressing a mouse button on the html element. On the other side, if we want to handle the mouse button press event as well, then we can use the jQuery mousedown( ) method to handle it.
Recommended Articles
This is a guide to jQuery mouseup(). Here we discuss the introduction and syntax of jquery mouseup() along with different examples and its code implementation. You may also look at the following articles to learn more –
