JS implementation of mouse click and double-click event Coexistence _javascript Skills

Source: Internet
Author: User
Tags button type

It has always been considered that in web development, double-click Events are used sparingly and sparingly until the most recent project needs to tie an order on one button and double click on two events. At first, I thought it was just a two-button tie. Only later understand, is that I think too simple, double-click the event trigger will also trigger the click of the ~

After a study, finally using JS "settimeout" delay to execute the method, the click Delay of 300 milliseconds to solve the execution, the code is as follows:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><title></title>
<mce:script src= "Jquery-1.6.min.js" mce_src= "Jquery-1.6.min.js" type= "Text/javascript" ></mce:script>
<mce:script type= "Text/javascript" >
$ (function () {
var num = 0;
var timefunname = null;
$ ("button"). Bind ("click", Function () {
To cancel a method that was not executed last time delay
Cleartimeout (Timefunname);
Delay 300 milliseconds to perform the click
Timefunname = settimeout (function () {
$ ("textarea"). Val ($ ("textarea"). Val () + "first" + num + "Minor event, event name: click/n");
}, 300); }. Bind ("DblClick", function () {
To cancel a method that was not executed last time delay
Cleartimeout (Timefunname);
$ ("textarea"). Val ($ ("textarea"). Val () + "first" + num + "Minor event, event name: Double-click/n");
<textarea rows= "cols=" ></textarea><button type= "button" > Submit </button></body>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.