table 行双击事件和单击事件同时存在 执行双击事件总会连单击事件 一起执行

[aimu2000]

议题条件

• 我确认已查看官方使用文档：https://layui.dev ，但没有找到相关解决方案。
• 我确认已在 Issues 中搜索过类似的问题，但没有找到相关解决方案。
• 我已仔细阅读： 🍀 Layui Issue 贡献指南

议题类型

疑是 BUG

使用版本

2.9.9

问题描述

table 行双击事件和单击事件同时存在 总会执行单击事件! 有什么办法可以跳过单击事件!

业务代码

table.on('rowDouble(main)', function(obj)
table.on('row(main)', function(obj)

截图补充

No response

浏览器

ch

演示地址

No response

友好承诺

• 我承诺将本着相互尊重、理解和友善的态度进行交流，共同维护 Layui 良好的社区氛围。

[Sight-wcg]

在JavaScript中，如果双击事件（dblclick）和单击事件（click）同时绑定在同一个元素上，当你双击元素时，两个事件都将被触发。为了区分两个事件，你可以使用 setTimeout 函数来添加一定的延迟。
你可以使用一个标识变量来检查是否双击，如下所示：

let clickTimer = null;
let isDoubleClick = false;
element.addEventListener('click', function(e) {
  if(clickTimer === null) {
    clickTimer = setTimeout(function() {
      clickTimer = null;
      if(!isDoubleClick) {
        console.log('单击事件！')
      }
    }, 200);
  }
});
element.addEventListener('dblclick', function(e) {
  clearTimeout(clickTimer);
  clickTimer = null;
  isDoubleClick = true;
  console.log('双击事件！')
});

这段代码在每次点击时都设置了一个延迟，如果在设定的时间（这里是200毫秒）内双击事件被触发，就会清除计时器和单击事件。这可以确保两个事件不会同时发生。
注意，你可能需要根据你的具体需求调整延迟的时间。在一些情况下，可能还需要对实现的细节进行稍微的调整。
希望这可以帮助你解决问题！

[Cuixq123]

双击事件执行完之后还要 isDoubleClick = false 吧，否则后面的单击执行不了了.

[Sight-wcg]

双击事件执行完之后还要 isDoubleClick = false 吧，否则后面的单击执行不了了.

AI 生成的，参考下思路就行。完整的解决方案看下面另一条回复的代码。

[Sight-wcg]

以前有人提过但是问题找不到了，今天偶然找到以前的代码了
https://codepen.io/Sight-wcg/pen/YzRxOGz

  // 指定时间内多次触发就取消执行
  function singleClick(func, wait) {
    var timeout
    return function () {
      var context = this
      var args = arguments
      if (timeout) {
        clearTimeout(timeout)
        timeout = null
        return
      }
      timeout = setTimeout(function () {
        func.apply(context, args)
        timeout = null
      }, wait)
    }
  }

  table.on(
    'row(ID-table-demo-setRowChecked)',
    singleClick(function (obj) {
      var data = obj.data // 获取当前行数据
      layer.msg('单击事件' + JSON.stringify(obj.data), {
        offset: '65px',
      })
    }, 230)
  )