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 (the 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).
Let's take a look at the order in which click events are executed:
Click: Mousedown,mouseout,click;
Double-click (DblClick): Mousedown,mouseout,click, Mousedown,mouseout,click,dblclick;
In a double-click event (DblClick), the two click event that is triggered (click) is blocked for the first time, but not 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).
In this case, the problem is solved by simply eliminating the extra click event.
The effect of the following figure:
Yun_qi_img/010846579687197.png
The source 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 ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>jquery prevents click multiple execution and passes dynamic function methods </title>
<script type= "Text/javascript" src= "Http://www.86y.org/js/jquery.min.js" ></script>
<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= buttons "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);
}, 400);
});
$ (obj). DblClick (function () {
Cleartimeout (TIMEFN);
});
$ (obj). removeattr ("onclick");
}
var ss1=function (s) {$ ("#show"). html ("div display test Result:" +s); alert ("a");};/ /div Method of Call
var ss2=function (s) {$ ("#show"). HTML ("input displays test results:" +s); alert ("B");};/ /input Method of Call
Events that dynamically bind elements through methods
STD ("#div", "div");
STD ("#but1", "Button1");
</script>
</body>
