DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> js jq 單擊和雙擊區分示例介紹
js jq 單擊和雙擊區分示例介紹
編輯:JavaScript基礎知識     
一:原理:

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

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

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

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

setTimeout

二:代碼:
復制代碼 代碼如下:
//定義setTimeout執行方法
var TimeFn = null;

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

$('div').dblclick(functin () {
// 取消上次延時未執行的方法
clearTimeout(TimeFn);
//雙擊事件的執行代碼
})
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved