This article mainly introduces jquery to prevent click to double-click multiple submissions and Transfer dynamic function methods, you need friends can refer to the following
Today is written about the JQ double click event to prevent multiple submissions, and through the function can be defined in batches, more powerful, through the method of dynamic binding element events. And you can dynamically transfer function names or multiple parameters (this instance only passes the function name through eval invocation). We all know that in the event bindings for jquery, a double-click event (DblClick) can trigger a two-click event (click). That is, a tag element (such as a div, etc.), if the element is simultaneously bound to a click event (click) and a double-click event (DblClick), the double-click Event (DblClick) is not triggered when the Click event is executed, and the double-click Event (DblClick) is performed. A two-click event is triggered, (click). First look at the execution order of the Click events: Click (click):mousedown,mouseout,click; Double-click (DblClick): Mousedown,mouseout , click, mousedown,mouseout,click,dblclick; in the double-click Event (DblClick), the two click event that is fired (click), the first clicked event (the click) is blocked, But not for the second time. That is, double-clicking an event (DblClick) Returns the result of a single click event (the click) and a double-click event (DblClick). Instead of one double click event (DblClick) result and two click event Results (click). So on, the problem is solved by just eliminating the extra click event. Effect The following figure: 010846579687197.png source code as follows: code as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>jquery Prevent click Multiple execution and pass dynamic function method </title> <script type=" text/ JavaScript "src=" Http://www.86y.org/js/jquery.min.js "></script> </head> <body > <div id= "Show" > Display test results:</div> <div style= "background: #f60; color: #fff; width:80px; padding:10px 20px; "id=" div "onclick=" ss1 (' div event ') > click me </div> <input type= "button" value= " Button One "id=" BUT1 "onclick=" SS2 (' input event ') '/> <script language= ' javascript ' > function std (obj , vs) { var timefn = null; var funs=$ (obj). attr ("onclick"); $ (obj). Click (function () { Cleartimeout (timefn); timefn = settimeout (function () { eval (funs); cleartimeout (timefn); }, ; }); $ (obj). DblClick (function () { cleartimeout (timefn); }); $ (obj). Removeattr ("onclick"); } var ss1=function (s) {$ ("#show"). html ("div display testTest result: "+s"; alert ("a");};/ /div called method var ss2=function (s) {$ ("#show"). HTML ("input displays test results:" +s); alert ("B");};/ /input called methods /By methods dynamically binding elements of events STD ("#div", "div"); std ("#but1", "Button1"); </script > </body> </html> 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
