jQuery Mouseup and Mousedown Event
The mousedown event is the first half of a click - the moment when you click the button before releasing it. This event can potentially be used to drag elements around a page. You can let visitors drag items around your web page just like they drag icons around their desktop - by clicking on them (without releasing the button) and moving them, and then releasing the button to drop them.
The mouseup event is the second half of a click - the moment when you release the button. This event is handy for responding to the moment when you drop an item that has been dragged. Let us learn with a simple example.
<html> <head> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> </head> <div id="id1"> Point Mouse here, keep pressed and the release after some time. </div> <script> $('#id1').mousedown(function() { $("div#id1").text("You pressed mouse down"); }); $('#id1').mouseup(function() { $("div#id1").text("You released Mouse"); }); </script> </body> </html> |
You may like to try this example here.