如何在同一DOM元素上同时正常使用click和dblclick事件？

冲突原因 #

浏览器的事件触发顺序是：首次点击触发click → 若两次点击间隔在系统判定阈值（通常200~300ms）内，才会触发dblclick事件。你当前的实现中click事件会在首次点击时立即执行，自然会阻断双击逻辑的生效。

解决思路 #

通过定时器延迟执行单击逻辑，等待阈值时间确认没有触发双击事件后，再执行单击逻辑；如果在阈值内触发了双击，就清空单击的定时器，只执行双击逻辑。

修改后的实现代码 #

export const createTag = (name) => {
  const tag = document.createElement('span');
  tag.innerHTML = name;
  // 绑定元素专属的定时器变量，避免全局污染
  tag.clickTimer = null;
  // 双击判定阈值，单位ms，可按需调整
  const DBLCLICK_THRESHOLD = 250;

  tag.addEventListener('dblclick', () => {
    // 触发双击时先清空单击的定时器，阻止单击逻辑执行
    clearTimeout(tag.clickTimer);
    // 执行原有双击逻辑
    tags.removeChild(tag);
    storeTags.splice(storeTags.indexOf(name), 1);
  });

  tag.addEventListener('click', () => {
    // 每次点击先清空上一次的定时器，避免重复触发
    clearTimeout(tag.clickTimer);
    // 延迟执行单击逻辑
    tag.clickTimer = setTimeout(() => {
      // 原有单击逻辑
      search.value = tag.innerHTML;
      const keyboardEvent = new KeyboardEvent('keypress', {
        code: 'Enter',
        key: 'Enter',
        charCode: 13,
        keyCode: 13,
        view: window,
        bubbles: true,
      });
      storeTags.splice(storeTags.indexOf(name), 1);
      storeTags.unshift(name);
      search.dispatchEvent(keyboardEvent);
    }, DBLCLICK_THRESHOLD);
  });

  return tag;
};

注意事项 #

• 阈值建议设置在200~300ms区间，和绝大多数系统的默认双击判定间隔对齐，避免和用户操作习惯不匹配
• 定时器绑定在元素本身的属性上，每个元素对应独立的定时器，不同元素的点击逻辑不会互相干扰

内容的提问来源于stack exchange，提问作者BERTOLDO