This article mainly introduces the click and double-click Event Conflict handling method, the need for friends can refer to the following
First code:
<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 event </p>");
})
$ ("div"). Bind ("dblclick.a", function () {//double-click event
$ ("Body"). Append ("<p>dblclick event </p>");
})
$ ("div"). Bind ("Mouseover.a", function () {//mouse over element event
$ ("Body"). Append ("<p>mouseover event </p>");
})
$ ("div"). Bind ("Mouseout.a", function () {//mouse move out element event
$ ("Body"). Append ("<p>mouseout event </p>");
})
})
</script>
<body>
<div>jquery Namespaces </div>
</body>
The effect as shown in the picture, I double-click the same time, will trigger the first two click events, what is this? And if I don't want to trigger when I double-click
Click an event, and just trigger the double-click event, how do I solve it? I've tried it. When you double-click, first click the event to bind,
This way, the Click event is not available ...
Later in the forum to ask others, finally have the answer. That is using the settimeout () method to set the time interval for the Click event, which is generally
Set to 300ms, so that when double-clicking, because the time interval of double-click is less than 300ms, so will not produce click event, but just produce
DblClick event. In the double-click Event, you need to use the cleartimeout () function to clear the Click event Processing. 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 in the Click event to set the time interval at which the click event is triggered
$ ("Body"). Append ("<p>click event </p>");
}, 300);
})
$ ("div"). Bind ("dblclick.a", function () {//double-click event
Cleartimeout (timer); In the double-click Event, first clear the time processing of the preceding click event
$ ("Body"). Append ("<p>dblclick event </p>");
})
$ ("div"). Bind ("Mouseover.a", function () {//mouse over element event
$ ("Body"). Append ("<p>mouseover event </p>");
})
$ ("div"). Bind ("Mouseout.a", function () {//mouse move out element event
$ ("Body"). Append ("<p>mouseout event </p>");
})
})
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
