jQuery mouseup() Method

Last Updated : 18 Nov, 2022

The jQuery mouseup() method is an inbuilt method which works when mouse left button is released over a selected element.

Syntax:

$(selector).mouseup(parameter)

Parameters: This method accepts single parameter function which is optional. This parameter is used to specify the function to run when the mouseup event is called.

Below examples illustrate the mouseup() method in jQuery:
Example 1: This example contains parameter.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>The mouseup Method</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <!-- jQuery code to show the working of this method -->
    <script> 
        $(document).ready(function () { 
            $("button").mouseup(function () { 
                $("button").after( 
                    "<p style='color:green;'>Mouse button released.</p>"); 
            }); 
        }); 
    </script> 
    <style> 
        body { 
            width: 200px; 
            padding: 20px; 
            min-height: 100px; 
            border: 2px solid green; 
        } 
    </style> 
</head> 
  
<body> 
    <!-- click on this button and release -->
    <button>Click Here!</button> 
</body> 
  
</html>

Output:

Program 2: This example does not contain parameter.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>The mouseup Method</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <!-- jQuery code to show the working of this method -->
    <script> 
        $(document).ready(function () { 
            $("div").mouseover(function () { 
                $("p").mouseup().slideToggle(); 
            }); 
        }); 
    </script> 
    <style> 
        body { 
            width: 340px; 
            padding: 20px; 
            height: 100px; 
            border: 2px solid green; 
            font-weight: bold; 
            font-size: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <p>Welcome to GeeksforGeeks!</p> 
    <!-- move over this text to see the change -->
    <div>Mouse over this text to see the change.</div> 
</body> 
  
</html>