Event jQuery mouseup() – how to use mouseup event with html elements. We are going to show you with simple example how to use mouseup event.
jQuery mouseup()
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
$(selector).mouseup()
This triggers the jQuery mouseup event for selected elements.
$(selector).mouseup(function)
Parameters
- Function :- This is an optional parameter. This work when the mouseup event is triggered.
Example 1 of jQuery mouseup() event
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 jQuery mouseup() event
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.