为何JavaScript的dblclick事件在Chrome生效却在Edge失效？

以下是针对你的问题的逐步排查和解决思路：

1. 确认按钮元素是否正确获取 #

你代码里的btn变量可能在Edge中未正确获取到DOM元素（比如代码执行时按钮还没加载完成），即便你没看到报错，也可能是Edge控制台默认未显示这类基础错误。先在绑定事件前添加打印验证：

console.log(btn); // 在Edge控制台查看输出是否为null

如果输出null，说明代码执行时机有误，把JS代码放在</body>标签前，或者用DOMContentLoaded事件包裹确保DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('你的按钮ID');
  btn.addEventListener('dblclick', () => {
    console.log('双击触发');
  });
});

2. 调整系统双击速度设置 #

Edge与Chrome对双击间隔的判断可能受系统设置影响：

• 打开Windows控制面板→鼠标→双击速度，将滑块调慢一些后再测试。如果你的双击间隔过短，Edge可能会将其识别为两次独立单击，而非双击事件。

3. 用最简代码排除页面干扰 #

编写一个完全独立的测试页面，排除原有页面的其他代码、样式干扰：

<!DOCTYPE html>
<html>
<body>
  <button id="testBtn">双击测试</button>
  <script>
    const btn = document.getElementById('testBtn');
    btn.addEventListener('dblclick', () => {
      console.log('Edge中双击生效了！');
    });
  </script>
</body>
</html>

如果这个最简代码能在Edge正常运行，说明你原有页面存在以下干扰因素：

• 按钮上绑定的click事件使用了event.stopPropagation()或event.preventDefault()，阻止了双击事件触发；
• 页面中存在防抖、节流函数，影响了双击事件的识别；
• 按钮的CSS样式存在问题，比如设置了pointer-events: none或有透明覆盖层，导致实际点击不到按钮。

4. 确认Edge内核版本 #

如果你使用的是旧版Edge（基于EdgeHTML内核，而非Chromium），可能存在事件兼容性问题。打开Edge地址栏输入edge://version查看内核版本，建议升级到最新的Chromium版Edge。

5. 检查Edge开发者工具的事件监听器 #

打开Edge的F12开发者工具，切换到Elements标签，选中按钮元素，在右侧Event Listeners面板中查找dblclick事件，确认它已正确绑定到按钮上。如果没有，说明绑定代码未执行。

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