JQuery prevents click double clicking from submitting and passing dynamic functions or multiple parameters multiple times

  • 2020-03-30 02:31:37
  • OfStack

Today is written about JQ double click event to prevent multiple commit problems, and through the function can be defined in bulk, more versatile, through the method of dynamic binding element events. You can also pass the function name dynamically or multiple arguments, etc. (this example only passes the function name through the Eval call).

We all know that in jQuery's event binding, a double-click event (dblclick) is triggered when executed. That is, a tag element (such as div, etc.), if the element is bound with a click event (click) and a double-click event (dblclick), then the double-click event (dblclick) will not be triggered when the single-click event (click) is executed, but the double-click event (dblclick) will be triggered twice when the double-click event (dblclick) is executed.

Let's take a look at the sequence of click events:

Mousedown, mouseout, click;
Double click (dblclick) : mousedown, mouseout, click, mousedown, mouseout, click, dblclick;

In a double click event (dblclick), the first click is masked, but not the second click. That is, a double-click event (dblclick) returns both a single-click event (click) result and a double-click event (dblclick) result. Instead of a double click event (dblclick) result and a double click event result (click).

In this case, the problem is solved by eliminating the extra one-click event.

The effect is as follows:
http://images.cnitblog.com/i/554071/201404/010846579687197.png
The source code is 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 To prevent click Double-click to execute and pass the dynamic function method multiple times </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 The event ')"> Click on me </div> 

<input type="button" value=" Button a " id="but1" onclick="ss2('INPUT The 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 results: "+s);alert("a");};//The method called by div
var ss2=function(s){$("#show").html("INPUT Display test results: "+s);alert("b");};//The method called by input

//Dynamically binds the events of the element through the method
std("#div","div"); 
std("#but1","button1"); 
</script> 
</body> 
</html> 

Related articles: