首頁  >  文章  >  web前端  >  jQuery如何只實作雙擊事件?雙擊事件的實現方式(詳解)

jQuery如何只實作雙擊事件?雙擊事件的實現方式(詳解)

青灯夜游
青灯夜游轉載
2018-10-29 16:29:503732瀏覽

本篇文章帶給大家的內容是介紹jQuery如何只實現雙擊事件?雙擊事件的實現方式(詳解)。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

在jQuery的事件綁定中,執行雙擊事件(dblclick)時能觸發兩次點擊事件(click)。即一個標籤元素(如p等),如果元素同時綁定了單擊事件(click)和雙擊事件(dblclick),那麼執行單擊事件(click)時,不會觸發雙擊事件(dblclick), 執行雙擊事件(dblclick)時卻會觸發兩次點選事件(click)。

先看一下點擊事件的執行順序:

點擊(click):mousedown,mouseout,click;

#雙擊(dblclick): mousedown,mouseout,click ,mousedown,mouseout,click,dblclick;

在雙擊事件(dblclick),觸發的兩次單擊事件(click)中,第一次的單擊事件(click)會被屏蔽掉,但第二次不會。也就是說雙擊事件(dblclick)會回傳一次點選事件(click)結果和一次雙擊事件(dblclick) 結果。而不是一次雙擊事件(dblclick)結果和兩次點擊事件結果(click)。 

如此這般的話,只要消滅多餘的一次點擊事件(click),這個問題就解決了。

setTimeout 

在jQuery的$(document).ready(function(){})裡面直接開寫:

//定义setTimeout执行方法
var TimeFn = null;

$('div').click(function () {
    // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //执行延时
    TimeFn = setTimeout(function(){
        //do function在此处写单击事件要执行的代码
    },300);
});

$('div').dblclick(functin () {
     // 取消上次延时未执行的方法
    clearTimeout(TimeFn);
    //双击事件的执行代码
})

從測試結果來看,如果前後兩次點擊的時間在300ms 左右的時候,還是很容易出現click 和dblclick 事件被「同時」調用的情況,而如果間隔的時間更短或更長,則只會有click 或dblclick事件。

至此,能一定程度上避免雙擊(dblclick)時觸發點選(click),從而實現雙擊事件。

以上是jQuery如何只實作雙擊事件?雙擊事件的實現方式(詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除