Sample code for conflict handling of click and double click events

2020-03-30 02:30:49
OfStack

Code first:

 
<head> 
<title></title> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
$(function () { 
$("div").bind("click.a", function () { //Click event
$("body").append("<p>click The event </p>"); 
}) 
$("div").bind("dblclick.a", function () { //Double-click the event
$("body").append("<p>dblclick The event </p>"); 
}) 
$("div").bind("mouseover.a", function () { //Mouse over element events
$("body").append("<p>mouseover The event </p>"); 
}) 
$("div").bind("mouseout.a", function () { //Mouse over the event of the element
$("body").append("<p>mouseout The event </p>"); 
}) 
}) 
</script> 
</head> 
<body> 
<div>jQuery The namespace </div> 
</body>

The effect is shown in the picture. When I double-click, I will trigger two click events. What happened? Also, if I don't want to trigger it when I double-click

What about clicking on an event and just triggering a double-click event? I've also tried untying the click when I double-click,

But then the click event is no longer available...

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/201404031643072.gif? 201433164323 ">

Later in the forum to ask others, finally had the answer. Use the setTimeout() method to set the time interval for the click event
Set it to 300ms, so that when you double-click, the double-click interval is less than 300ms, so the click event is not generated, but just generated
The dblclick events. In the double click event, the clearTimeout() function clears the click event. The code is as follows:

 
<script type="text/javascript" language="javascript"> 
$(function () { 
var timer = null; 
$("div").bind("click.a", function () { //Click event
clearTimeout(timer); 
timer = setTimeout(function () { //Add a setTimeout() function to the click event to set the interval at which the click event will be triggered
$("body").append("<p>click The event </p>"); 
}, 300); 

}) 
$("div").bind("dblclick.a", function () { //Double-click the event
clearTimeout(timer); //In the double-click event, clear the time handling of the previous click event
$("body").append("<p>dblclick The event </p>"); 
}) 
$("div").bind("mouseover.a", function () { //Mouse over element events
$("body").append("<p>mouseover The event </p>"); 
}) 
$("div").bind("mouseout.a", function () { //Mouse over the event of the element
$("body").append("<p>mouseout The event </p>"); 
}) 
}) 
</script>

So, the problem is solved!