双击dblclick事件，同时会执行click事件中的语句，当需要为一个元素同时添加这两个事件时，显然这不是我们想要的结果，举个实例，在最近做的canvas开发中使用鼠标画区域，鼠标单击一下开始画，鼠标双击时结束，并保存当前所画的区域，这时候就碰到了这个问题。解决的方法，，可以参考下面的代码，用延时的方法实现。
<!DOCTYPE html><html><head><title></title></head><body><button type="button" id="button">点击我</button><script type="text/javascript">function $(id){return document.getElementById(id);}var timer=null;$('button').addEventListener('click',function(e){clearTimeout(timer);timer=setTimeout(function(){//初始化一个延时console.log("1");// console.log(e);},250)},false);$('button').addEventListener('dblclick',function(){//双击事件会先触发两次单击事件，然后再执行双击事件，使用清除定时器来达到双击只执行双击事件的目的clearTimeout(timer);console.log("2");},false);</script></body></html>
![java 双击触发事件_[Java教程]jQuery 双击事件（dblclick）时 不触发单击事件(click)...](https://100zi.50zi.cn/uploadfile/img/14/919/f1239a942fb28f1983d2f1a265ed734a.jpg)
