jQuery MouseUp Event  Method

jQuery MouseUp Event Method

jQuery mouseup() event method; In this tutorial, you will learn how to use mouseup event with HTML elements.

jQuery MouseUp Event Method

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 of jQuery MouseUp Event Method

$(selector).mouseup()  

This triggers the jQuery mouseup event for selected elements.

$(selector).mouseup(function)  

Parameters of jQuery MouseUp Event Method

  • Function :- This is an optional parameter. This work when the mouseup event is triggered.

Example 1 of jQuery MouseUp Event Method

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 of jQuery MouseUp Event Method

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.

Recommended jQuery Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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