Microsoft Edge/IE中表格单元格onmouseover事件异常问题咨询

这种Edge独有的奇怪行为我之前也碰到过，确实头疼——当<input>聚焦后按住左键移动到其他<td>时，mouseover事件的currentTarget居然还停留在最初的单元格上，完全不跟着鼠标走，但Chrome就正常。

问题原因 #

大概率是Edge的事件处理机制在「输入框聚焦+按住鼠标左键」这种交互组合下，把事件上下文锁定在了最初触发的元素上，导致currentTarget没有正确更新到当前鼠标停留的<td>。

解决方案 #

我们可以绕过currentTarget，直接通过鼠标坐标或事件目标来获取当前单元格，这里有两个实用的方法：

方法1：使用event.target结合closest()获取当前单元格

放弃依赖currentTarget，直接从事件的target出发，向上找到最近的<td>元素，确保拿到正确的单元格：

// 给所有<td>绑定mouseover事件
document.querySelectorAll('td').forEach(td => {
  td.addEventListener('mouseover', function(e) {
    // 找到当前鼠标停留的<td>元素
    const activeTd = e.target.closest('td');
    if (activeTd) {
      console.log(activeTd.textContent);
    }
  });
});

方法2：通过elementFromPoint()主动获取鼠标位置的元素

如果方法1还是有问题，可以监听鼠标按下/抬起状态，当按住左键时，直接用鼠标坐标获取当前元素：

let isMousePressed = false;

// 全局监听鼠标按下/抬起状态
document.addEventListener('mousedown', () => isMousePressed = true);
document.addEventListener('mouseup', () => isMousePressed = false);

document.querySelectorAll('td').forEach(td => {
  td.addEventListener('mouseover', function(e) {
    if (isMousePressed) {
      // 根据鼠标坐标获取当前元素，再定位到<td>
      const hoveredElement = document.elementFromPoint(e.clientX, e.clientY);
      const activeTd = hoveredElement.closest('td');
      if (activeTd) {
        console.log(activeTd.textContent);
      }
    } else {
      // 正常情况还是用currentTarget
      console.log(e.currentTarget.textContent);
    }
  });
});

原理说明 #

这两种方法都绕过了Edge异常的currentTarget，直接从鼠标交互的实际元素出发，确保每次mouseover都能拿到当前鼠标所在的<td>，完美解决这个兼容性问题。

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