click事件穿透源于DOM默认事件冒泡机制：点击子元素后事件沿父链向上传播至document；需用e.stopPropagation()在事件处理器内显式阻止，且不可置于异步回调中。
为什么 click 事件会“穿透”到父元素
因为 DOM 默认启用事件冒泡：点击 <span> 后，事件会自动沿父链向上触发 <a>、<div> 直至 document。这不是 bug，是标准行为——但多数时候你只想要子元素自己的逻辑生效。
常见错误现象包括：
- 点击按钮却跳转了链接（
<a>的 href 生效） - 表格行绑了 click 跳转，但行内「删除」图标一按，既删了数据又跳走了
- 模态框内容区点一下，整个弹窗直接关闭（遮罩层的关闭逻辑被意外触发）
stopPropagation() 必须在事件处理函数里调用
它不是声明式配置，而是运行时操作：必须拿到事件对象 e，并在函数体内显式调用 e.stopPropagation()。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
document.querySelector('.delete-btn').addEventListener('click', function (e) {
e.stopPropagation(); // ✅ 放这里才有效
deleteItem();
});
容易踩的坑：
- 漏传参数
function(e)，导致e是undefined，调用报错Cannot read property 'stopPropagation' of undefined - 写成
event.stopPropagation()却没声明event参数，或拼错为ev.stopPropagation() - 放在异步回调里（如
setTimeout内），此时事件早已冒泡完毕，调用无效
stopPropagation() 和 preventDefault() 别混用
它们解决的是两类问题：
-
e.stopPropagation()：只切断传播路径，不影响默认行为（比如<a>依然会跳转） -
e.preventDefault()：只取消默认动作（阻止跳转/表单提交），不拦冒泡（父级 click 仍会触发）
如果你既要阻止跳转，又要防止触发父级逻辑，得两个都写：
link.addEventListener('click', function (e) {
e.preventDefault(); // 阻止 href 跳转
e.stopPropagation(); // 阻止冒泡到父容器
});
stopImmediatePropagation() 多了一层拦截能力
当同一个元素绑了多个同类型事件监听器时，stopPropagation() 只阻止向上传播，但本元素上排在后面的监听器仍会执行；而 e.stopImmediatePropagation() 会立刻终止当前元素所有剩余监听器 + 向上传播。
典型场景：
- 第三方库和你自己都给同一个按钮加了
click监听，你想确保自己的逻辑执行后，库的监听器完全不运行 - 调试时临时屏蔽某个事件链，避免干扰
注意：stopImmediatePropagation() 是更激进的操作，日常防冒泡用 stopPropagation() 就够了。
真正容易被忽略的是：事件冒泡只对**可冒泡事件**生效——像 focus、blur、mouseenter 这类事件本身就不冒泡，调 stopPropagation() 没效果。动手前先查 MDN 确认该事件是否支持冒泡。
