Javascript和jquery事件--雙擊事件

在js中和jq中對應的命名都為dblclick,ondblclick，但是ondblclick和dom元素的屬性相似，可以在行內設置，也可以使用attr設置。

 

同時，雙擊事件需要關注一個問題，那就是雙擊引起的兩次單擊問題。鼠標事件，雙擊和單擊發生在如下條件下：

　　單擊：mousedown, mouseup, click

　　雙擊：mousedown, mouseup, click, mousedown, mouseup, click, dblclick

　　可以看到，每觸發一次雙擊事件，就會觸發兩次單擊事件。無論在js還是在jq中，都沒有對這個情況做出處理，如果有需要的話，只能你自己解決了，那就是設置延時。

var timer=null;

function clickfunction(){

        clearTimeout(timer);

        timer=setTimeout(function(){//初始化一個延時

                 console.log("1");

                  },250);

}

function dbclickfunction(){

        clearTimeout(timer);//發生雙擊了就阻止單擊引發的操作

        console.log("2");

}

//js方法

var btn1 = document.getElementById('button1');
btn1.addEventListener('click',clickfunction);
btn1.addEventListener('dblclick',dbclickfunction);

//jq方法
$('#button2').on('click',clickfunction);
$('#button2').on('dblclick',dbclickfunction);

 

         對於雙擊事件的判定中，js給雙擊預留的時間比jq多一些，在js中如果點擊慢一點還是會出現一個單擊加一個雙擊的情況，可以給單擊延時久一點，但是這樣設置的話，會使得單擊事件沒有那么靈活，而且如果單擊還綁定其他監聽器甚至涉及父元素的冒泡事件，情況會更加復雜，盡量避免這樣給一個元素同時設置單擊和雙擊事件的情況，同樣你也可以自己用單擊事件和時間戳設置雙擊事件。

http://www.w3school.com.cn/jsref/event_ondblclick.asp

https://blog.csdn.net/qq_30868289/article/details/79484322