BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery mouseup() Method

Last Updated: April 29, 2019 by Chaitanya Singh | Filed Under: jQuery

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.
jQuery mouseup
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.
jQuery mouseup event

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery Sliding Effects
  3. jQuery mouseenter() Method
  4. jQuery mousedown() Method
  5. jQuery dblclick() Method

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap