使用 jQuery 避免滑鼠雙擊

oschina發表於2013-08-20
jQuery

　介紹  

　　當使用者雙擊DOM物件（例如按鈕和連結等）時，對於使用者互動一直是個麻煩的問題。 幸運的是, jQuery 提供了一個相當棒的解決方法。 那就是.one()。

　　.one()這個方法是做什麼的？

　　它附加了一個元素事件的處理程式並且每個元素只能執行一次事件處理器函式。

　引數

　　.one( events [, selector ] [, data ], handler(eventObject) )

　　events

　　型別: String

  • 規定新增到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。就像“click”和“keydown.myPlugin”一樣。

　　選擇器引數

　　引數型別: String

  • 選擇器字串用於過濾出被選中的元素中能觸發事件的子元素
  • 如果傳null或者省略，當事件到達選定的元素時就會被觸發

　　資料

　　引數型別: 任何型別

  • 該引數的值在事件觸發將會傳遞給的事件處理函式

　　事件處理函式

　引數型別:函式型別

  • 事件觸發時應該呼叫的函式
  • false 也是允許的因為它就是簡單return false;函式的簡寫形式

　舉例

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

　　或者

$("body").one("click", "#saveBttn", function () {
    alert("This displays if #saveBttn is the first thing clicked in the body.");
});

　　上述程式碼關鍵在於：

  • 當程式碼執行結束時，點選id為saveBtn的元素將會彈出警告框
  • 之後的點選將沒有任何反映
  • 這等同於 ==>
$("#saveBttn").on("click", function (event) {
    alert("This will be displayed only once.");
    $(this).off(event);
});

　　換句話說這和在繫結事件處理函式中顯式呼叫off()作用是一樣的

　　瞭解更多請點選

　　jQuery .one() 

　總結

　　上面所提到的方法是jQuery 1.7的新特性，所以如果你的元素點選事件不止觸發一次，這可能是個解決方案哦。多麼神奇的方法啊，如有任何疑問請聯絡我。

　　英文原文：How-to-Avoid-Double-Clicking-With-jQuery

相關文章