js jq 單擊和雙擊區(qū)分示例介紹
更新時間：2013年11月05日 15:50:38 作者：
雙擊事件(dblclick)會返回一次單擊事件(click)結果和一次雙擊事件(dblclick) 結果，下面有個不錯的示例，大家可以感受下
一：原理：
先看一下點擊事件的執(zhí)行順序：
單擊(click)：mousedown，mouseout，click；
雙擊(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick；
在雙擊事件(dblclick)，觸發(fā)的兩次單擊事件(click)中，第一次的單擊事件(click)會被屏蔽掉，但第二次不會。也就是說雙擊事件(dblclick)會返回一次單擊事件(click)結果和一次雙擊事件(dblclick) 結果。而不是一次雙擊事件(dblclick)結果和兩次單擊事件結果(click)。
如此這般的話，只需消滅掉多余的一次單擊事件(click)，這個問題就解決了。
setTimeout
二：代碼：
//定義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í)行代碼
})
先看一下點擊事件的執(zhí)行順序：
單擊(click)：mousedown，mouseout，click；
雙擊(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick；
在雙擊事件(dblclick)，觸發(fā)的兩次單擊事件(click)中，第一次的單擊事件(click)會被屏蔽掉，但第二次不會。也就是說雙擊事件(dblclick)會返回一次單擊事件(click)結果和一次雙擊事件(dblclick) 結果。而不是一次雙擊事件(dblclick)結果和兩次單擊事件結果(click)。
如此這般的話，只需消滅掉多余的一次單擊事件(click)，這個問題就解決了。
setTimeout
二：代碼：
復制代碼 代碼如下:
//定義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í)行代碼
})
相關文章
在JavaScript中操作時間之getYear()方法的使用教程
這篇文章主要介紹了在JavaScript中操作時間之getYear()方法的使用教程,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
本篇文章主要給大家詳細分析了JavaScript數(shù)值Number類型的相關知識點，對此有興趣的朋友跟著小編一起學習下。2018-02-02
這篇文章主要介紹了Javascript 按位與賦值運算符 (&=)的相關資料,需要的朋友可以參考下2014-02-02
今天的教程來自天才的Cody Lindley的新書：《JavaScript啟蒙教程 / JavaScript Enlightenment》。他討論了令人迷惑的關鍵字this，以及確定和設置this的值的方法。2016-06-06
ESLint是一個代碼規(guī)范和錯誤檢查工具，下面這篇文章主要介紹了EsLint的相關資料，需要的朋友可以參考學習，下面來一起看看吧。2017-02-02
下面小編就為大家?guī)硪黄岸薺s文件合并的三種方式推薦。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了如何編寫高質量JS代碼的方法及相關資料,需要的朋友可以參考下2014-12-12
簡介JavaScript中getUTCMonth()方法的使用
這篇文章主要介紹了簡介JavaScript中getUTCMonth()方法的使用,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JavaScript中reduce()方法的使用詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
學習js的朋友一定要知道和注意，其實每種語言都有它的命名規(guī)則。2009-09-09