First upload the code:
The code copy is as follows:
<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 event</p>");
})
$("div").bind("dblclick.a", function () { //Double-click event
$("body").append("<p>dblclick event</p>");
})
$("div").bind("mouseover.a", function () { // Events of the mouse passing through the element
$("body").append("<p>mouseover event</p>");
})
$("div").bind("mouseout.a", function () { // Events of the mouse moving out element
$("body").append("<p>mouseout event</p>");
})
})
</script>
</head>
<body>
<div>jQuery namespace</div>
</body>
The effect is shown in the figure. When I double-click, two click events will be triggered first. What's going on? Also, if I don't want to trigger it when double-clicking
How to solve the problem if you click the event and just trigger the double-click event? I have also tried to unbind the click event when double-clicking.
But in this way, the click event is no longer useful. . .
Later, I asked someone on the forum and finally got the answer. That is to use the setTimeout() method to set the time interval of the click event. This time interval is generally
Set to 300ms, so when double-clicking, since the time interval of double-clicking is less than 300ms, the click event will not be generated, but will only be generated.
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:
The code copy 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 triggered by the click event
$("body").append("<p>click event</p>");
}, 300);
})
$("div").bind("dblclick.a", function () { //Double-click event
clearTimeout(timer); //In the double-click event, clear the time processing of the previous click event first
$("body").append("<p>dblclick event</p>");
})
$("div").bind("mouseover.a", function () { // Events of the mouse passing through the element
$("body").append("<p>mouseover event</p>");
})
$("div").bind("mouseout.a", function () { // Events of the mouse moving out element
$("body").append("<p>mouseout event</p>");
})
})
</script>
In this way, this problem will be solved!