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

嗯，这个问题听起来像是你在阻止事件冒泡的时候遇到了一些小麻烦。你已经在按钮的点击事件里调用了 e.stopPropagation()，这看起来是正确的做法。不过，有个细节需要注意一下。

确保你的 .modal-overlay 元素确实包裹了整个弹窗，包括按钮。如果按钮在 .modal-overlay 外面，那 stopPropagation 是无法阻止冒泡到 .modal-overlay 的，因为它们之间没有父子关系。

检查一下 HTML 结构，确认一下按钮是否在遮罩层内。如果按钮在遮罩层外面，你需要调整一下结构，或者在遮罩层的点击事件处理函数里添加一个判断，避免在点击按钮时触发遮罩层的点击事件。

更好的写法是在遮罩层的点击事件里加个条件判断，比如：

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

  if (e.target === document.querySelector('.modal-overlay')) {

    hideModal();

  }

});

这样可以确保只有在点击遮罩层空白区域时才会关闭弹窗，而不是在点击按钮时也触发关闭操作。希望这个方法能帮到你。

兄弟，你这个问题挺常见的。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结构，看看按钮是不是被包含在遮罩层里面了。