mouseout事件在<td>文本区异常触发，是否为事件传播问题？

嗨，Matthew！你遇到的这个情况确实和DOM事件的触发机制紧密相关——这并不是传统意义上的事件冒泡/传播问题，但核心是mouseout事件的特性导致的。

为什么悬停文本会触发的mouseout？ #

mouseout事件的规则是：当鼠标从当前元素，或者它的任意子元素移开时，都会触发该事件。在你的表格结构里，<td>是<tr>的子元素，当你从<tr>的空白区域移到<td>内的文本上时，浏览器会认为你“离开”了<tr>的直接区域（进入了子元素<td>），所以会触发<tr>的mouseout事件，进而导致你的编辑/删除工具被隐藏。

优雅的解决方案：替换事件类型 #

最直接且优雅的修复方式，是把mouseout换成mouseleave事件，同时建议把对应的mouseover换成mouseenter——这两个事件是一对，专门解决这类子元素干扰的问题：

• mouseleave：只有当鼠标完全离开整个元素（包括所有子元素）时才会触发
• mouseenter：只有当鼠标首次进入整个元素（包括子元素）时才会触发，不会因为在子元素间移动而重复触发

举个代码示例：

// 原来的代码（存在问题）
tr.addEventListener('mouseover', showTools);
tr.addEventListener('mouseout', hideTools);

// 修改后的代码（修复问题）
tr.addEventListener('mouseenter', showTools);
tr.addEventListener('mouseleave', hideTools);

更进一步：用事件委托优化性能 #

如果你的表格有很多行，给每一行单独绑定事件会有点冗余。可以用事件委托，只在表格父元素上绑定一次事件，就能处理所有行的交互，代码更简洁高效：

const table = document.querySelector('table');

table.addEventListener('mouseenter', (e) => {
  // 找到鼠标进入的<tr>元素
  const targetTr = e.target.closest('tr');
  if (targetTr) {
    // 显示当前行的编辑/删除工具
    showTools(targetTr);
  }
});

table.addEventListener('mouseleave', (e) => {
  const targetTr = e.target.closest('tr');
  if (targetTr) {
    // 隐藏当前行的编辑/删除工具
    hideTools(targetTr);
  }
});

这样修改后，不管鼠标在<tr>的空白区域还是<td>的文本上移动，都不会误触发隐藏工具的逻辑，只有当鼠标完全离开该行时，工具才会隐藏。

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