jQuery mouseup() event method; In this tutorial, you will learn how to use mouseup event with HTML elements.
jQuery MouseUp Event Method
The jQuery mouseup event occurs when the mouse button is released after being pressed down on selected HTML elements. In other words, when a user clicks a mouse button and then lets go of it while the mouse cursor is over an HTML element, the mouseup event is triggered for that element. This event is often used to detect when a user completes a click action, like releasing a mouse button after pressing it.
Syntax of jQuery MouseUp Event Method
Here’s an syntax the mouseup event:
$(selector).mouseup()
This triggers the jQuery mouseup event for selected elements.
$(selector).mouseup(function)
Parameters of jQuery MouseUp Event Method
- Function :- This is an optional parameter. This work when the mouseup event is triggered.
Example 1 of jQuery MouseUp Event Method
Let’s see an example 1 of mouseup() event.
<html>
<head>
<title>jQuery Mouse Up Event</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#first").mouseup(function(){
$( "span" ).text( "Mouseup event triggered" ).show().fadeOut( 3000 );
});
});
</script>
</head>
<body>
<h5 id="first"> Button press and release</h5>
<span></span>
</body>
</html>
In this above example 1, you can see that mouseup() event is triggered when you mouse cursor pointer on html elements and click and released the mouse button. The mouseup event trigger and appear some text and hide in 3 seconds.
Example 2 of jQuery MouseUp Event Method
Let’s see an example 2 of mousep event.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mouse Up Event</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#second").mouseup(function(){
$( this ).text("Mouse Up Triggered");
});
});
</script>
</head>
<body>
<div id="second">Click Here for Preview</div>
</body>
</html>
In this above example 2, you can see that mouseup() event is triggered when you mouse cursor pointer on html elements and click and released the mouse button. The mouseup event trigger and appear some text.
