.dblclick()
In this chapter you will learn:
- Syntax and Description for .dblclick() event
- Bind double click event for paragraph
- How to slide up a paragraph after double clicking
Syntax and Description
.dblclick(handler)
.dblclick()
handler is a function to execute each time the event is triggered.
Return value is the jQuery object, for chaining purposes.
jQuery dblclick binds an event handler to the dblclick JavaScript event, or trigger that event on an element.
.dblclick(handler) is a shortcut for
.bind('dblclick', handler).
.dblclick() is a shortcut for .trigger('dblclick').
We can also trigger the event when a different element is clicked.
$('#other').click(function() {
$('#target').dblclick();
});
Bind double click event for paragraph
The following code binds the dblclick event on every paragraph on the page.
<html><!-- j av a 2s .c om-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var divdbl = $("div");
divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});
});
</script>
<style>
div.dbl { background:yellow;color:black; }
</style>
</head>
<body>
<body>
<div>java2s.com</div><span>Double click the block</span>
</body>
</html>
double click to slide up
The following code listens to the double click event and does slide up animation after double clicking.
<html><!--from j av a 2 s . c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").dblclick(function () {
$(this).slideUp();
});
});
</script>
</head>
<body>
<body>
<p>java2s .com</p>
<p>j ava2s.com</p>
</body>
</html>
Next chapter...
What you will learn in the next chapter: