快捷導(dǎo)航

jQuery防止click雙擊多次提交及傳遞動(dòng)態(tài)函數(shù)或多參數(shù)

更新時(shí)間：2014年04月02日 16:48:19 作者：

這篇文章主要介紹了jQuery防止click雙擊多次提交及傳遞動(dòng)態(tài)函數(shù)方法,需要的朋友可以參考下

今天是寫的是關(guān)于JQ的雙擊事件防止多次提交的問題，并且通過函數(shù)可以批量定義，通能性更強(qiáng)了，通過方法動(dòng)態(tài)綁定元素的事件。而且可以動(dòng)態(tài)傳遞函數(shù)名或者多參數(shù)等（本實(shí)例只傳遞函數(shù)名通過Eval調(diào)用）。

我們都知道在jQuery的事件綁定中，執(zhí)行雙擊事件(dblclick)時(shí)能觸發(fā)兩次單擊事件(click)。即一個(gè)標(biāo)簽元素（如div等），如果元素同時(shí)綁定了單擊事件(click)和雙擊事件(dblclick),那么執(zhí)行單擊事件(click)時(shí)，不會(huì)觸發(fā)雙擊事件(dblclick)，執(zhí)行雙擊事件(dblclick)時(shí)卻會(huì)觸發(fā)兩次單擊事件(click)。

先看一下點(diǎn)擊事件的執(zhí)行順序：

單擊(click)：mousedown，mouseout，click；
雙擊(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick；

在雙擊事件(dblclick)，觸發(fā)的兩次單擊事件(click)中，第一次的單擊事件(click)會(huì)被屏蔽掉，但第二次不會(huì)。也就是說雙擊事件(dblclick)會(huì)返回一次單擊事件(click)結(jié)果和一次雙擊事件(dblclick) 結(jié)果。而不是一次雙擊事件(dblclick)結(jié)果和兩次單擊事件結(jié)果(click)。

如此這般的話，只需消滅掉多余的一次單擊事件(click)，這個(gè)問題就解決了。

效果如下圖：
http://images.cnitblog.com/i/554071/201404/010846579687197.png
源代碼如下：

復(fù)制代碼代碼如下:

 
<!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防止click雙擊多次執(zhí)行及傳遞動(dòng)態(tài)函數(shù)方法</title> 
<script type="text/javascript" src="http://www.86y.org/js/jquery.min.js"></script> 
</head> 

<body> 
<div id="show">顯示測試結(jié)果：</div> 
<div style="background:#f60;color:#fff;width:80px;padding:10px 20px;" id="div" onclick="ss1('DIV事件')">點(diǎn)擊我吧</div> 

<input type="button" value="按鈕一" id="but1" onclick="ss2('INPUT事件')"/> 
<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顯示測試結(jié)果："+s);alert("a");};//div調(diào)用的方法 
var ss2=function(s){$("#show").html("INPUT顯示測試結(jié)果："+s);alert("b");};//input調(diào)用的方法 

//通過方法動(dòng)態(tài)綁定元素的事件 
std("#div","div"); 
std("#but1","button1"); 
</script> 
</body> 
</html> 