前端单击事件与双击事件冲突问题解决

1、单双击事件有哪些?
单击:mousedown, mouseup, click
双击:mousedown, mouseup, click, mousedown, mouseup, click, dblclick

2、冲突原因

  • 由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件,原生的js不提供专门的双击事件。
  • 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示

3、出现问题的代码

// 标注单击事件
      ele.on("click", function (params) {
      console.log('单击事件')
      return;
      });

      // 标注双击事件
      ele.on("dblclick", function (params) {
        console.log('双击事件')
      });

4、解决方法–setTimerout
双击时为了屏蔽单击事件,引入定时器功能,动态的为每次鼠标单击计时,300ms,300ms内鼠标再次点击会出发双击事件而不走单击事件。

5、解决后代码

	var clickTimeId;

      // 标注单击事件
      oroptionmapjsonr_charts.on("click", function (params) {
        clearTimeout(clickTimeId);
        clickTimeId = setTimeout(function () {
        console.log('单击事件')
        }, 250);
      });

      // 标注双击事件
      oroptionmapjsonr_charts.on("dblclick", function (params) {
        clearTimeout(clickTimeId);
       console.log('双击事件')
      });
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值