如何用 stopPropagation 阻止事件冒泡防止触发父级回调

stopPropagation()用于阻止事件冒泡，需在子元素事件处理函数中调用；它只阻断传播路径，不影响默认行为，与preventDefault()功能不同。用 stopPropagation() 阻止事件冒泡，核心是在子元素的事件处理函数中调用它，让事件不再向父级 DOM 逐层上传。这能有效避免点击子元素时意外触发父级绑定的同类型事件（比如 click）。什么时候必须用 stopPropagation常见于以下场景：弹出菜单（如下拉框、右键菜单）内部有按钮，点击按钮不希望关闭菜单 表格行（<tr>）绑了点击跳转，但行内「删除」图标点击应只执行删除，不触发整行跳转 模态框（Modal）中点击内容区不关闭，但点击遮罩层（父级）才关闭基本写法：在子元素事件中调用注意：必须在事件处理函数内部调用，且通常放在逻辑开头或关键判断之后：JavaScript 示例：document.querySelector('.child-btn').addEventListener('click', function (e) { e.stopPropagation(); // ? 关键：阻止事件继续向上冒泡 console.log('只执行子按钮逻辑');});此时即使它的父元素（比如 .parent）也监听了 click，也不会被触发。和 preventDefault 的区别别搞混stopPropagation() 只影响事件传播路径（不往上走），不影响默认行为；preventDefault() 只取消默认动作（如链接跳转、表单提交），不阻止冒泡。 文心快码 文心快码（Comate）是百度推出的一款AI辅助编程工具