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>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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