事件冒泡怎么阻止不了？我用了 stopPropagation 还是触发了父级点击

Air-倩云提问于 2026-03-12 14:38:22 阅读 9

前端

我在做一个弹窗组件，点击按钮打开弹窗，然后点击弹窗外的遮罩层关闭。但问题是，点击按钮时，不仅触发了按钮的点击事件，还冒泡到了外层容器，导致弹窗刚打开就立刻关闭了。

我已经在按钮的点击回调里写了 e.stopPropagation()，但好像没用，还是冒泡了。是不是我哪里写错了？

document.querySelector('.open-btn').addEventListener('click', (e) => {
  e.stopPropagation();
  showModal();
});

document.querySelector('.modal-overlay').addEventListener('click', () => {
  hideModal();
});

DOM操作事件冒泡

我来解答赞 2 收藏

反馈

1 条解答

熙苒 Dev Lv1

兄弟，你这个问题挺常见的。stopPropagation() 本身应该能阻止冒泡，但你需要检查一下你的HTML结构。

我猜测最可能的情况是：你的按钮元素本身就在 modal-overlay 里面，或者弹窗显示后按钮被包含在了遮罩层内部。这样的话，点击按钮时，事件先触发按钮的回调，然后继续往上冒泡到 modal-overlay，stopPropagation 按理说应该能拦住，但你确认它执行到了吗？

更稳妥的做法是别依赖 stopPropagation，直接在关闭弹窗的逻辑里判断点击的是不是遮罩层本身：

document.querySelector('.open-btn').addEventListener('click', (e) => {

  showModal();

});



document.querySelector('.modal-overlay').addEventListener('click', (e) => {

  // 只有点击的是遮罩层本身才关闭，点击子元素不关闭

  if (e.target === e.currentTarget) {

    hideModal();

  }

});

就是绑定事件的那个元素（modal-overlay），是实际触发点击的元素。如果点击的是按钮或其他子元素，e.target 就不等于 e.currentTarget，条件不成立，弹窗就不会关闭。

你可以先检查一下你的按钮和遮罩层的HTML结构，看看按钮是不是被包含在遮罩层里面了。

2026-03-12 15:11