堆叠绑定mousedown事件的元素为何下层事件失效？如何修复？

嘿，这个问题我之前在做拖拽组件时也碰到过类似的坑，来帮你拆解清楚成因和修复方案：

大概率是以下两种核心原因导致的：

• 全局拖拽状态没有正确重置
  你的拖拽逻辑里肯定维护了类似isDragging这样的全局标记吧？当触发mousedown时会把它设为true，mouseup时再改回false。但如果在拖拽过程中直接移除了顶层元素，mouseup事件根本没机会触发（因为元素已经从DOM里消失了），这个标记就一直卡在“拖拽中”的状态。后续点击下层元素时，你的拖拽逻辑会先检查这个标记，发现还在拖拽，就直接跳过了事件处理，自然没反应。

• 全局事件监听残留
  为了实现拖拽，你肯定会把mousemove和mouseup绑定到document上（不然拖拽到元素外面就失效了）。但如果移除顶层元素时，没有及时解绑这些全局监听，它们就会一直留在那里。当下层元素触发mousedown时，这些残留的监听会先捕获事件，而且因为关联的顶层元素已经不存在，逻辑会出错，间接阻塞了下层元素的事件触发。

还有个小众情况：如果你的事件是绑定到父元素用了事件委托，而委托逻辑里的目标判断有问题，比如只认顶层元素的选择器，那移除顶层后，下层元素的事件也会被委托逻辑忽略。

针对上面的成因，给你几个具体的解决办法：

1. 强制重置全局拖拽状态 #

除了给元素绑定mouseup，一定要给document也绑定mouseup事件，这样哪怕拖拽的元素被删掉了，document的mouseup依然能触发，用来重置状态：

let isDragging = false;
let currentDragEl = null;

function handleMouseDown(e) {
  isDragging = true;
  currentDragEl = e.target;
  // 绑定全局拖拽相关事件
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', resetDragState);
}

function resetDragState() {
  isDragging = false;
  currentDragEl = null;
  // 解绑全局事件，避免残留
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', resetDragState);
}

另外，在移除元素的逻辑里，主动检查并触发状态重置：

function removeTopElement(el) {
  // 如果要移除的是当前正在拖拽的元素，先重置状态
  if (currentDragEl === el) {
    resetDragState();
  }
  el.remove();
}

2. 确保事件监听成对解绑 #

不管是绑定到元素还是document上的事件，一定要在拖拽结束（包括元素被移除）时及时解绑。上面的代码已经包含了这部分逻辑，核心就是“绑定一次，解绑一次”，绝对不能只绑不解。

3. 检查事件绑定的目标 #

如果用了事件委托，一定要确保委托逻辑能正确识别所有拖拽元素：

// 错误示例：只认特定元素，下层元素可能匹配不到
parent.addEventListener('mousedown', (e) => {
  if (e.target.id === 'top-element') {
    handleMouseDown(e);
  }
});

// 正确示例：用类选择器匹配所有拖拽元素
parent.addEventListener('mousedown', (e) => {
  if (e.target.matches('.drag-notification')) {
    handleMouseDown(e);
  }
});

如果是给每个元素单独绑定事件，也要确保绑定逻辑在元素生成时正确执行，没有漏绑。

额外排查：pointer-events样式 #

有时候元素的pointer-events会被意外设为none，导致无法触发事件。移除顶层元素后，可以检查下层元素的样式：

const lowerEl = document.querySelector('.your-notification-class');
console.log(getComputedStyle(lowerEl).pointerEvents); // 正常应该是auto

如果是none，手动改回来就行。

这个问题的核心就是拖拽状态残留或者全局事件没清理干净，只要把这两点搞定，移除顶层元素后下层的拖拽事件就能正常触发了。

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