解决js鼠标单击事件与双击事件冲突方法

事件冲突的原因:

对于同一个DOM元素,即绑定了单击事件,又绑定了双击事件,当我们单击鼠标时,会触发单击事件;双击鼠标时,不仅会触发双击事件,同时还会触发单击事件,而且单击事件一定会先于双击事件发生。这样,就产生了单击鼠标事件于双击鼠标事件冲突,那么,我们该怎么避免呢。

解决冲突方法:

主要思想是利用一个定时器。单击鼠标事件发生后,延迟一段时间再执行单击事件,如果在延迟的这段时间之内,若没有发生双击鼠标事件,延时结束后,那么就执行单击鼠标事件;如果在这段时间内,发生了双击鼠标事件,那么只执行双击鼠标事件,将定时器清零,不执行单击鼠标事件。

代码实现:

var timer = null;	//定义一个变量存放定时器
function doOneClick() { 
  if(timer) {	//取消上次延时未执行的方法
     window.clearTimeout(timer);
     timer = null;
  }
  timer = window.setTimeout(function() {
   console.log('单击事件');	//延时300毫秒执行
  }, 300);									
}
 
function doDbClick() {
  if(timer) {	//取消上次延时未执行的方法
   	window.clearTimeout(timer);
  }
  console.log('双击事件');
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拿了橘子跑666

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值