拖拽事件中classList.remove()执行异常，高亮样式残留如何解决

异常原因 #

• 嵌套节点触发的事件误判：放置区如果包含子节点，当拖拽光标从放置区移动到自身子节点时，会先触发放置区的dragleave事件，再触发子节点的dragenter。如果此时dragleave的判断逻辑先执行，就可能提前移除高亮，后续逻辑衔接出错就会导致状态不一致。
• popHighlight异步执行导致时序混乱：移除高亮的逻辑中使用了无延迟setTimeout，会把移除操作放到宏任务队列执行。如果拖拽操作过快（比如快速进出多个放置区），同步执行的入栈、加高亮操作和异步的出栈、删高亮操作顺序错乱，就会出现高亮残留。
• dragleave触发条件过严：当前dragleave逻辑只在event.target === nodeStack.at(-1)时才触发出栈，要是因为事件冒泡、target指向子元素等原因导致target和栈顶不匹配，就不会执行移除高亮的逻辑，直接造成样式残留。
• 未处理拖拽离页场景：如果用户直接把拖拽项拖出浏览器窗口，不会触发放置区的dragleave事件，栈中残留的节点永远不会被清理，高亮就会一直存在。

修复方案 #

1. 移除popHighlight中的异步setTimeout #

直接同步执行高亮的移除和添加逻辑，避免时序错乱。如果是为了解决子元素进出的时序问题，可改用优先级更高的requestAnimationFrame替代：

const popHighlight = () => {
  // 删掉setTimeout直接同步执行，或者改用requestAnimationFrame
  const removedHighlight = highlightStack.pop();
  if (removedHighlight)
    removedHighlight.classList.remove("drag-under-item");

  const newHighlight = highlightStack.at(-1);
  if (newHighlight) newHighlight.classList.add("drag-under-item");
};

2. 优化dragleave判断逻辑，增加坐标校验 #

判断鼠标位置是否真的离开了当前放置区，避免移动到子元素时误触发leave：

element.addEventListener("dragleave", (event) => {
  event.stopPropagation();
  event.preventDefault();
  // 坐标校验：确认鼠标真的离开了当前元素区域
  const rect = event.target.getBoundingClientRect();
  const isOutside = event.clientX < rect.left || event.clientX > rect.right ||
                  event.clientY < rect.top || event.clientY > rect.bottom;
  if (isOutside && event.target === nodeStack.at(-1)) {
    popNodeStack();
  }
});

3. 增加全局兜底清理逻辑 #

监听全局dragend和页面级dragleave事件，拖拽结束或者拖拽离开整个页面时强制清空所有栈和残留高亮：

document.addEventListener('dragend', () => {
  // 清空所有栈、移除所有高亮
  nodeStack.forEach(node => node.classList.remove("drag-under-item"));
  highlightStack.forEach(node => node.classList.remove("drag-under-item"));
  nodeStack = [];
  highlightStack = [];
});

document.addEventListener('dragleave', (e) => {
  // 拖拽离开页面时兜底清理
  if (e.target === document.documentElement) {
    nodeStack.forEach(node => node.classList.remove("drag-under-item"));
    highlightStack.forEach(node => node.classList.remove("drag-under-item"));
    nodeStack = [];
    highlightStack = [];
  }
});

4. 可选优化：补全栈逻辑校验 #

在checkBacktrack中增加重复入栈判断，避免同一个元素多次入栈导致的状态错位。

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