快捷導(dǎo)航

使用jQuery避免鼠標(biāo)雙擊的解決方案

更新時(shí)間：2013年08月21日 09:29:23 作者：

用戶雙擊DOM對(duì)象（例如按鈕和鏈接等）時(shí)，對(duì)于用戶交互一直是個(gè)麻煩的問題，如果你的元素點(diǎn)擊事件不止觸發(fā)一次，可以參考以下的解決方案

介紹
當(dāng)用戶雙擊DOM對(duì)象（例如按鈕和鏈接等）時(shí)，對(duì)于用戶交互一直是個(gè)麻煩的問題。幸運(yùn)的是, jQuery 提供了一個(gè)相當(dāng)棒的解決方法。那就是.one()。

.one()這個(gè)方法是做什么的？
它附加了一個(gè)元素事件的處理程序并且每個(gè)元素只能運(yùn)行一次事件處理器函數(shù)。

參數(shù)
.one( events [, selector ] [, data ], handler(eventObject) )

events
類型: String
•規(guī)定添加到元素的一個(gè)或多個(gè)事件。由空格分隔多個(gè)事件。必須是有效的事件。就像“click”和“keydown.myPlugin”一樣。

選擇器參數(shù)
參數(shù)類型: String
•選擇器字符串用于過濾出被選中的元素中能觸發(fā)事件的子元素
•如果傳null或者省略，當(dāng)事件到達(dá)選定的元素時(shí)就會(huì)被觸發(fā)
數(shù)據(jù)
參數(shù)類型: 任何類型
•該參數(shù)的值在事件觸發(fā)將會(huì)傳遞給的事件處理函數(shù)
事件處理函數(shù)
　參數(shù)類型:函數(shù)類型
•事件觸發(fā)時(shí)應(yīng)該調(diào)用的函數(shù)
•false 也是允許的因?yàn)樗褪呛?jiǎn)單return false;函數(shù)的簡(jiǎn)寫形式
舉例

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

 
$("#saveBttn").one("click", function () { 
alert("This will be displayed only once."); 
}); 

或者

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

 
$("body").one("click", "#saveBttn", function () { 
alert("This displays if #saveBttn is the first thing clicked in the body."); 
});上述代碼關(guān)鍵在于： 

•當(dāng)代碼執(zhí)行結(jié)束時(shí)，點(diǎn)擊id為saveBtn的元素將會(huì)彈出警告框
•之后的點(diǎn)擊將沒有任何反映
•這等同于 ==>

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

 
$("#saveBttn").on("click", function (event) { 
alert("This will be displayed only once."); 
$(this).off(event); 
}); 

換句話說這和在綁定事件處理函數(shù)中顯式調(diào)用off()作用是一樣的

了解更多請(qǐng)點(diǎn)擊
jQuery .one()

總結(jié)
上面所提到的方法是jQuery 1.7的新特性，所以如果你的元素點(diǎn)擊事件不止觸發(fā)一次，這可能是個(gè)解決方案哦。多么神奇的方法啊，如有任何疑問請(qǐng)聯(lián)系我。

您可能感興趣的文章: