在前端工作中我們會經(jīng)常遇到元素的注冊事件,當然jquery的點擊和雙擊事件是可以實現(xiàn)的,jquery因其簡短的代碼即可實現(xiàn)功能而備受追捧,但是并不是所有的情況下都推薦使用jquery,比如有些會限制文件大小,有些則與jquery沖突的情況,這里文匯軟件小編就來為大家介紹如何使用onClick和onDblClick在同一元素上執(zhí)行。
最近項目中遇到了在同一DOM元素上需要添加單擊和雙擊事件,但是發(fā)現(xiàn)該元素只會執(zhí)行單擊事件,其實原因與事件觸發(fā)的先后順序有關的,
ondblclick=onmousedown+onmouseup+onclick+onmouseup,因為onclick總是在ondblclick事件觸發(fā)前所觸發(fā),所以總是執(zhí)行onclick事件,這時我們需要對2個事件的處理函數(shù)稍作處理就可以實現(xiàn)2個事件并存了,代碼如下:
var clickTimer = null;
function dj(){
if(clickTimer) {
window.clearTimeout(clickTimer);
clickTimer = null;
}
clickTimer = window.setTimeout(function(){
// your click process code here
alert("單擊");
}, 400);
}
function sj(){
if(clickTimer) {
window.clearTimeout(clickTimer);
clickTimer = null;
}
// your click process code here
alert("雙擊");
}
利用定時器延遲執(zhí)行onclick事件,這樣在雙擊過程中會取消中途觸發(fā)的單擊事件。然后事件完成后再清除定時器同時把變量設置為空,這樣就可以完美解決了,。
好了,以上就是小編今天為大家分享的內(nèi)容了,如果想關注更多小編的文章就來文匯軟件看看吧。