jQuery mouseup() Method attaches an event handler function to the html elements. This event handler function is executed when the any of the mouse button (left, right or middle) is released, while the mouse pointer is over the html element.
jQuery mouseup() Method Syntax
$(selector).mouseup(function(){
//event handler function
});
Here $(selector) is a jQuery selector to select html elements that are attached to the event handler function using mouseup() method.
jQuery mouseup() Example
In the following example we are displaying an alert message when the mouse button is released over a button. We have selected the button element of the page using jQuery selector and we have attached the button element to the event handler using mouseup() method.
In the event handler function we have setup an alert message, this will be displayed when the mouseup event is triggered.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").mouseup(function(){
alert("Mouse button is released over a button");
});
});
</script>
</head>
<body>
<h2>jQuery mouseup event example</h2>
<p>This example is published on beginnersbook.com.</p>
<p>An alert message will be displayed when the mouse button
is released while the mouse pointer is over the button.</p>
<button>Button</button>
</body>
</html>
Output:
Before the mouse button is released:
This screenshot is taken when the page is loaded in the browser and no activity is performed on the page.
After the mouse button is released over a button:
This screenshot is taken after the mouse button is released, while the mouse pointer is over the button of the document. As you can see, an alert message is displayed.
Leave a Reply