js jq 單擊和雙擊區(qū)分示例介紹
更新時(shí)間:2013年11月05日 15:50:38 作者:
雙擊事件(dblclick)會(huì)返回一次單擊事件(click)結(jié)果和一次雙擊事件(dblclick) 結(jié)果,下面有個(gè)不錯(cuò)的示例,大家可以感受下
一:原理:
先看一下點(diǎn)擊事件的執(zhí)行順序:
單擊(click):mousedown,mouseout,click;
雙擊(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick;
在雙擊事件(dblclick),觸發(fā)的兩次單擊事件(click)中,第一次的單擊事件(click)會(huì)被屏蔽掉,但第二次不會(huì)。也就是說雙擊事件(dblclick)會(huì)返回一次單擊事件(click)結(jié)果和一次雙擊事件(dblclick) 結(jié)果。而不是一次雙擊事件(dblclick)結(jié)果和兩次單擊事件結(jié)果(click)。
如此這般的話,只需消滅掉多余的一次單擊事件(click),這個(gè)問題就解決了。
setTimeout
二:代碼:
//定義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í)行代碼
})
先看一下點(diǎn)擊事件的執(zhí)行順序:
單擊(click):mousedown,mouseout,click;
雙擊(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick;
在雙擊事件(dblclick),觸發(fā)的兩次單擊事件(click)中,第一次的單擊事件(click)會(huì)被屏蔽掉,但第二次不會(huì)。也就是說雙擊事件(dblclick)會(huì)返回一次單擊事件(click)結(jié)果和一次雙擊事件(dblclick) 結(jié)果。而不是一次雙擊事件(dblclick)結(jié)果和兩次單擊事件結(jié)果(click)。
如此這般的話,只需消滅掉多余的一次單擊事件(click),這個(gè)問題就解決了。
setTimeout
二:代碼:
復(fù)制代碼 代碼如下:
//定義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í)行代碼
})
相關(guān)文章
設(shè)計(jì)模式中的組合模式在JavaScript程序構(gòu)建中的使用
組合模式一般是將一系列類似的小對(duì)象組合成大的對(duì)象,由這個(gè)大對(duì)象提供接口來對(duì)里面的小對(duì)象進(jìn)行操作,下買呢我們來詳細(xì)看一下設(shè)計(jì)模式中的組合模式在JavaScript程序構(gòu)建中的使用2016-05-05深入解析JavaScript中的arguments對(duì)象
arguments是JavaScript里的一個(gè)內(nèi)置對(duì)象,像數(shù)組結(jié)構(gòu)一樣存儲(chǔ)參數(shù)的傳遞,這里我們就來深入解析JavaScript中的arguments對(duì)象,需要的朋友可以參考下2016-06-06javascript 語法基礎(chǔ) 想學(xué)習(xí)js的朋友可以看看
javascript 語法基礎(chǔ),都是一些大體的說下常見問題,適合有點(diǎn)別的程序基礎(chǔ)的朋友。2009-12-12鍵盤事件中keyCode、which和charCode 的兼容性測(cè)試
鍵盤事件中keyCode、which和charCode 的兼容性測(cè)試...2007-03-03javascript真的不難-回顧一下基礎(chǔ)知識(shí)
先來學(xué)習(xí)一下Javascript語言中的基礎(chǔ)知識(shí)問題其時(shí)對(duì)于每種編程語言來說基礎(chǔ)知識(shí)都是大同小異的,對(duì)變量,函數(shù),條件語句塊,循環(huán)語句塊等等,本文簡(jiǎn)要介紹一下,感興趣的朋友可以了解下2013-01-01