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

张开发
• 2026/4/17 0:49:56 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何用 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辅助编程工具

更多文章