jQuery只實(shí)現(xiàn)雙擊事件的方法

jQuery只實(shí)現(xiàn)雙擊事件的方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

在jQuery的事件綁定中，執(zhí)行雙擊事件(dblclick)時(shí)能觸發(fā)兩次單擊事件(click)。即一個(gè)標(biāo)簽元素（如p等），如果元素同時(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ì)。也就是說(shuō)雙擊事件(dblclick)會(huì)返回一次單擊事件(click)結(jié)果和一次雙擊事件(dblclick) 結(jié)果。而不是一次雙擊事件(dblclick)結(jié)果和兩次單擊事件結(jié)果(click)。

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

setTimeout

在jQuery的$(document).ready(function(){})里面直接開(kāi)寫：

//定義setTimeout執(zhí)行方法
var TimeFn = null;

$('div').click(function () {
    // 取消上次延時(shí)未執(zhí)行的方法
    clearTimeout(TimeFn);
    //執(zhí)行延時(shí)
    TimeFn = setTimeout(function(){
        //do function在此處寫單擊事件要執(zhí)行的代碼
    },300);
});

$('div').dblclick(functin () {
     // 取消上次延時(shí)未執(zhí)行的方法
    clearTimeout(TimeFn);
    //雙擊事件的執(zhí)行代碼
})

從測(cè)試結(jié)果來(lái)看，如果前后兩次點(diǎn)擊的時(shí)間在 300ms 左右的時(shí)候，還是很容易出現(xiàn) click 和 dblclick 事件被“同時(shí)”調(diào)用的情況，而如果間隔的時(shí)間更短或更長(zhǎng)，則只會(huì)有 click 或 dblclick 事件。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)jQuery只實(shí)現(xiàn)雙擊事件的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。