JavaScript ondragleave在子元素间移动时误触发如何解决？

HTML5 拖放API的dragenter/dragleave事件默认遵循事件冒泡规则：当鼠标在绑定了事件的父元素（即示例中的<tr>行）的子元素（<td>单元格）之间移动时，浏览器会判定指针离开了上一个悬停的子节点，该dragleave事件会向上冒泡到父元素，直接触发父元素绑定的离开回调——但此时指针实际仍在父元素的范围内，这就是高亮状态异常消失的核心原因。
网上常见的纯计数器方案之所以失效，基本都是因为没有过滤子元素冒泡上来的事件，或是漏了事件关联目标的判断，很容易因为事件触发顺序问题出现计数偏差，导致状态错乱。

放弃纯计数逻辑，直接在dragleave触发时判断事件关联的节点是否仍在目标父元素内部，只有确认指针真正移出父元素边界时，才执行离开回调的逻辑。

修正后的JS代码 #

let activeRowId = null;

function enter(ev, recordid) {
  ev.stopPropagation();
  const targetRow = document.getElementById(recordid);
  // 清除其他行的高亮状态
  if (activeRowId && activeRowId !== recordid) {
    document.getElementById(activeRowId).style.backgroundColor = '';
  }
  targetRow.style.backgroundColor = '#AA0000';
  activeRowId = recordid;
}

function leave(ev, recordid) {
  ev.stopPropagation();
  const targetRow = document.getElementById(recordid);
  // 兼容不同浏览器的事件关联目标属性
  const relatedNode = ev.relatedTarget || ev.toElement;
  // 若移动到的节点仍在当前tr内部，属于子元素间切换，直接返回不处理
  if (targetRow.contains(relatedNode)) return;
  // 真正移出tr范围时才清除高亮
  targetRow.style.backgroundColor = '';
  if (activeRowId === recordid) activeRowId = null;
}

// 全局阻止dragover默认行为，否则拖放的放置逻辑不会生效
document.addEventListener('dragover', e => e.preventDefault());

方案优势 #

• 无计数偏差问题：不需要维护进入/离开的数值计数，不会因为事件漏发、冒泡顺序问题导致状态错乱
• 低侵入性：不需要修改原有HTML结构，不需要给所有子元素绑定额外事件，直接替换原有事件回调即可
• 兼容性好：覆盖所有支持HTML5拖放API的浏览器，不需要额外适配

补充说明：如果需要实现拖放后的数据处理逻辑，记得在目标<tr>上绑定ondrop事件，回调第一行执行ev.preventDefault()，否则浏览器会默认拦截放置操作，触发无响应。

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