Chrome浏览器中dblclick、onmouseover等事件无法触发求助

以下是针对你遇到问题的具体排查方向和解决方案：

• 检查元素是否被遮挡
  打开Chrome开发者工具的「Elements」面板，将鼠标悬停在目标按钮元素上，查看高亮区域是否覆盖整个按钮。若存在其他透明元素（如z-index更高的空div）覆盖在按钮上方，会拦截鼠标事件。可通过「Layers」面板查看页面元素层级，调整遮挡元素的z-index或移除不必要的遮挡。

• 排查事件阻止逻辑
  检查页面中是否有其他脚本调用了event.stopPropagation()或event.preventDefault()，尤其是父元素的鼠标/点击事件处理器。例如，父元素的click事件阻止冒泡可能干扰dblclick的触发；部分全局事件监听也可能意外拦截鼠标事件。

• 检查Chrome环境设置

  1. 关闭所有浏览器扩展后重试，部分广告拦截、脚本管理类扩展可能篡改页面事件机制；
  2. 切换到Chrome隐身模式测试，排除缓存、扩展和用户配置的影响；
  3. 查看Chrome「设置-高级-无障碍」选项，确认未启用「忽略鼠标和触摸输入」等特殊设置。

• 验证CSS属性影响
  检查目标元素及父元素的CSS，确认未设置pointer-events: none（该属性会使元素完全不响应鼠标事件）。同时排查opacity: 0或visibility: hidden等可能导致元素不可交互的属性。

• 确保代码执行时机正确
  若你的JS代码在DOM未完全加载时执行，会导致document.querySelector('#but')获取不到元素，事件绑定失败。请确保代码在DOM加载完成后执行，示例如下：

<button id="but">Button</button>
<script>
// 等待DOM加载完成后执行绑定
document.addEventListener('DOMContentLoaded', () => {
  const b = document.querySelector('#but');

  b.addEventListener('dblclick', () => {
    console.log('dblclick');
  });

  b.addEventListener('mouseenter', () => {
    console.log('mouseenter');
  });

  b.addEventListener('mouseleave', () => {
    console.log('mouseleave');
  });
});
</script>

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