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