jQuery Event mouseup() Method

The jQuery event mouseup() method is used to bind a handler (function) to the mouseup event, or to trigger that event on the selected element.

It triggers when the mouse button is released over the selected element. Usually, this method combines with the mousedown() method to handle the mouse actions.

Syntax

Following is the syntax of the jQuery event mouseup() method −

$(selector).mouseup(function)

Parameters

This method accepts an optional parameter as a function, which is described below −

function (optional) − An optional function to execute when a mouseup event triggered.

Return Value

This method does not have any return value.

Example 1

The following program demonstrates the usage of the jQuery event mouseup() method −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        background-color: rgb(49, 157, 65);
        color: white;
        padding: 10px;
    }
</style>
</head>
<body>
    <div>Press and release the mouse button over me..!</div>
    <script>
        $('div').mouseup(function(){
            alert("Mouse button released...!");
        });
    </script>
</body>
</html>

Output

The following program displayed a message when the user presses and releases the mouse button over the selected element, an alert pop-up will appear on the browser screen −

When the user releases the mouse button over the selected element −

Example 2

The following is another example of the jQuery event mouseup() method. We use this method to trigger the mouseup event for a specific button −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    span{
        color: rgb(78, 78, 157);
        font-size: 20px;
    }
    button{
        width: 100px;
        padding: 10px;
    }
</style>
</head>
<body>
    <p>Click and released mouse button on the below displayed button..</p>
    <button>Click me!</button>
    <span></span>
    <script>
        $('button').mouseup(function(){
            $('span').text("Mouse button released...!");
        });
    </script>
</body>
</html>

Output

After running the program, a button will appear. When the button is pressed and released, a light blue message will be displayed next to the button −

When the user presses and releases the mouse button over the displayed button −

Example 3

Use the mouseup() method to change the background color of the form input fields −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    input{
        width: 200px;
        padding: 10px;
    }
    button{
        padding: 10px;
    }
</style>
</head>
<body>
    <p>Click on the below form input fields to change the different background</p>
   <form>
    <input type="text" placeholder="Username" id="uname">
    <input type="password" placeholder="Password" id = 'psw'>
    <button>Login</button>
   </form>
    <script>
        $('input').mouseup(function(){
            $(this).css("background-color", "lightblue");
        });
    </script>
</body>
</html>

Output

Once the above program is executed, a form with two input fields and a button is displayed. When the user clicks and releases the mouse button over an input field, the background color changes to 'light blue' −

When a user releases the mouse button on an input fields −

Example 4

Let's combines the mousedown and mouseup event to handle the mouse actions −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>

</style>
</head>
<body>
    <p>Press and release the mouse button over the displayed textarea field</p>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <span></span>
    <script>
        $('textarea').mousedown(function(){
            $(this).css("background-color", "lightblue");
            $('span').text("Mouse button pressed down");
        }).mouseup(function(){
            $(this).css("background-color", "lightgreen");
            $('span').text("Mouse button released over the element")
        });
    </script>
</body>
</html>

Output

Please find below the GIF output format of the program mentioned above −

jquery_ref_events.htm

Print Page