Home > Developer > JavaScript
First run the Code:
Copy codeThe Code 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 an event
$ ("Body"). append ("<p> click event </p> ");
})
$ ("Div"). bind ("dblclick. a", function () {// double-click the event
$ ("Body"). append ("<p> dblclick event </p> ");
})
$ ("Div"). bind ("mouseover. a", function () {// an event where the mouse passes through the element
$ ("Body"). append ("<p> mouseover event </p> ");
})
$ ("Div"). bind ("mouseout. a", function () {// event for removing elements from the mouse
$ ("Body"). append ("<p> mouseout event </p> ");
})
})
</Script>
</Head>
<Body>
<Div> jQuery namespace </div>
</Body>
Results: When I double-click the event, two click events are triggered first. What is the problem? Also, if I don't want to trigger the trigger when double-clicking
Click an event and trigger a double-click event. How can this problem be solved? I also tried to unbind the click event when double-clicking,
In this way, the click event cannot be used again...
Later, I asked someone on the Forum and finally got the answer. The setTimeout () method is used to set the time interval of the click event.
It is set to 300 ms. In this way, because the double-click interval is less than 300 ms, the click event is not generated, but only
Dblclick event. In double-click events, you must use the clearTimeout () function to clear click events. The Code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript" language = "javascript">
$ (Function (){
Var timer = null;
$ ("Div"). bind ("click. a", function () {// click an event
ClearTimeout (timer );
Timer = setTimeout (function () {// Add a setTimeout () function to the click event to set the interval at which the event is triggered.
$ ("Body"). append ("<p> click event </p> ");
},300 );
})
$ ("Div"). bind ("dblclick. a", function () {// double-click the 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 () {// an event where the mouse passes through the element
$ ("Body"). append ("<p> mouseover event </p> ");
})
$ ("Div"). bind ("mouseout. a", function () {// event for removing elements from the mouse
$ ("Body"). append ("<p> mouseout event </p> ");
})
})
</Script>
In this way, this problem is solved!
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
