jQuery click() and dblclick() example

jQuery click() and dblclick() events are the most common used mouse events :

  1. click() – Fire when mouse single click on the matched element.
  2. dblclick() – Fire when mouse double clicks on the matched element.

Try it yourself


<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	#singleClick, #doubleClick{
		float:left;
		padding:8px;
		margin:16px;
		border:1px solid blue;
		width:150px;
		height:150px;
		background-color:#999966;
	}
	
</style>

</head>

<body>

<h1>jQuery click() and dblclick() example</h1>

<div id="singleClick">
	Single Click Me
</div>

<div id="doubleClick">
	Double Clicks Me
</div>

<script type="text/javascript">
		
$('#singleClick').click(function(){
	$('#singleClick').slideUp();
});

$('#doubleClick').dblclick(function(){
	$('#doubleClick').fadeOut();
});

</script>

</body>
</html>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
bishal
Guest
bishal

how to implement both in single div

trackback
jQuery Tutorials

[…] click() and dblclick() example Detect the mouse single click and double clicks with jQuery. […]