解决JS双击事件dblclick触发时，同时会执行click事件中的语句

双击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>

解决JS双击事件dblclick触发时，同时会执行click事件中的语句相关推荐

使用button触发FileUpload控件的click事件
点击button触发FileUpload控件的click事件通过点击button按钮触发FileUpload控件,避免因浏览器不同而导致FileUpload控件样式发生变化,影响页面效果. 注意:需 ...
html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件（$event.cancelBubble=true；）
1. 第一种方法:html中屏蔽父元素的点击事件($event.cancelBubble=true;) <div (click)="select($event)"> & ...
html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: 你好, 战无不胜 [注销] js: 方法1: UserLogout.οnclick=function (e) ...
解决JS文件页面加载时的阻塞
关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...
js连续指定两次或者多次的click事件（解决办法）
setTimeout (表达式,延时时间) setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout 在执行时,是在载入后延迟指定时间 ...
使用ENTER模拟触发表单提交或者click事件
2019独角兽企业重金招聘Python工程师标准>>> 给原本需要触发事件的元素绑定事件: 2 .给需要使用enter的元素添加jQuery,绑定enter需要触发的事件: 转载于: ...
html中取消li的点击事件,jquery设置html li点击click事件为什么无法赋值到表单input value中呢？...
小弟最近在做一个项目.用到了闭包的问题,是这样的,页面中有一堆li(动态加载的),点击某一个的时候获取对应的index,然后把index赋值到input标签中的value,但是怎么都赋值不上.不知道咋 ...
Node.js: 如何继承 events 自定义事件及触发函数
events 是node.js的核心api ,几乎大部分node.js 的api都继承 events 类(javascript中没有类,也不存在继承,确切说是模拟类和继承,点击查看) 比如我们常见的 ...
js click 与 onclick 事件绑定,触发与解绑
click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" οnclic ...

解决JS双击事件dblclick触发时，同时会执行click事件中的语句

解决JS双击事件dblclick触发时，同时会执行click事件中的语句相关推荐

最新文章

热门文章