使用 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 1.7的新特性,所以如果你的元素點選事件不止觸發一次,這可能是個解決方案哦。多麼神奇的方法啊,如有任何疑問請聯絡我。
相關文章
- jQuery滑鼠雙擊事件簡單介紹jQuery事件
- Excel表格裡滑鼠雙擊的用法技巧,透過滑鼠雙擊提升Excel表格使用效率Excel
- 使用JQuery雙擊修改Table中TdjQuery
- 滑鼠單擊變雙擊怎麼辦 滑鼠單擊變成雙擊的解決辦法
- ALV中滑鼠雙擊事件事件
- 滑鼠雙擊變成屬性怎麼辦 滑鼠雙擊變成屬性的方法
- 滑鼠雙擊在Excel中的妙用Excel
- win10滑鼠單擊變雙擊如何解決_win10系統滑鼠單擊變雙擊的解決方法Win10
- 乾貨分享 | UE遊戲滑鼠雙擊判定遊戲
- 如何使用jQuery禁用滑鼠右鍵jQuery
- 滑鼠雙擊頁面實現自動滾動效果
- jquery雙擊tr修改內容提交資料jQuery
- jQuery滑鼠移入移出jQuery
- 使用PDO查詢mysql避免SQL隱碼攻擊MySql
- GridView 單擊選擇行,雙擊開啟詳細頁面,滑鼠移到某行上變色View
- jQuery感知滑鼠滑入方向jQuery
- JQuery獲取滑鼠位置jQuery
- jquery-中的滑鼠事件jQuery事件
- jquery禁止在頁面使用滑鼠右鍵程式碼示例jQuery
- onDblClick雙擊事件事件
- Android雙擊以及多擊事件Android事件
- Win10系統下Synaptics觸控板雙指單擊(滑鼠右鍵)失靈無法使用怎麼辦Win10APT
- Jquery單引號和雙引號的使用注意jQuery
- jQuery滑鼠懸浮翻牌效果詳解jQuery
- jQuery滑鼠懸浮聚焦效果詳解jQuery
- jQuery獲取滑鼠指標座標jQuery指標
- jQuery 事件(一) 滑鼠與鍵盤事件jQuery事件
- 動作遊戲中,如何引導玩家避免一直使用普通攻擊?遊戲
- 單擊滑鼠即可完成的檔案共享
- JQuery4:滑鼠事件和滾動事件jQuery事件
- 滑鼠滾動固定js(jquery)例項分享JSjQuery
- jQuery禁用滑鼠右鍵程式碼例項jQuery
- jQuery隨滑鼠旋轉的圖形效果jQuery
- jQuery滑鼠拖動調整數字大小jQuery
- 雙擊和單擊事件衝突解決方法事件
- 處理WKContentView雙擊crashView
- Bitcoin Gold 遭遇雙花攻擊Go
- 1.21 JQuery4:滑鼠事件與滾動事件jQuery事件