jQuery 双击事件(dblclick)时,不触发单击事件(click)
在jQuery的事件綁定中,執(zhí)行雙擊事件(dblclick)時能觸發(fā)兩次單擊事件(click)。即一個標(biāo)簽元素(如div等),如果元素同時綁定了單擊事件(click)和雙擊事件(dblclick),那么執(zhí)行單擊事件(click)時,不會觸發(fā)雙擊事件(dblclick), 執(zhí)行雙擊事件(dblclick)時卻會觸發(fā)兩次單擊事件(click)。
先看一下點(diǎn)擊事件的執(zhí)行順序:
單擊(click):mousedown,mouseout,click;
雙擊(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick;
在雙擊事件(dblclick),觸發(fā)的兩次單擊事件(click)中,第一次的單擊事件(click)會被屏蔽掉,但第二次不會。也就是說雙擊事件(dblclick)會返回一次單擊事件(click)結(jié)果和一次雙擊事件(dblclick) 結(jié)果。而不是一次雙擊事件(dblclick)結(jié)果和兩次單擊事件結(jié)果(click)。 ?
如此這般的話,只需消滅掉多余的一次單擊事件(click),這個問題就解決了。
setTimeout?
在jQuery的$(document).ready(function(){})里面直接開寫:
//定義setTimeout執(zhí)行方法
var TimeFn = null;
$('div').click(function () {
// 取消上次延時未執(zhí)行的方法
clearTimeout(TimeFn);
//執(zhí)行延時
TimeFn = setTimeout(function(){
//do function在此處寫單擊事件要執(zhí)行的代碼
},300);
});
$('div').dblclick(functin () {
// 取消上次延時未執(zhí)行的方法
clearTimeout(TimeFn);
//雙擊事件的執(zhí)行代碼
})
從測試結(jié)果來看,如果前后兩次點(diǎn)擊的時間在 300ms 左右的時候,還是很容易出現(xiàn) click 和 dblclick 事件被“同時”調(diào)用的情況,而如果間隔的時間更短或更長,則只會有 click 或 dblclick 事件。
至此,能一定程度上避免雙擊(dblclick)時觸發(fā)單擊(click)。
轉(zhuǎn)載于:https://www.cnblogs.com/maegg/p/4741600.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的jQuery 双击事件(dblclick)时,不触发单击事件(click)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【project】十次方-01
- 下一篇: 游戏开发中的数据表示