jQuery mouseup() event method; In this tutorial, you will learn how to use mouseup event with HTML elements.
jQuery MouseUp Event Method
Jquery mouseup event occurs when the mouse button is released on selected HTML elements. In other words, when the mouse button is pressed down, at that time when the mouse is on the HTML element and that mouse button is released at that time, which triggers this mouseup event on HTML elements.
Syntax of jQuery MouseUp Event Method
$(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.
