stoppropagation()用于阻止事件冒泡，即中断事件从当前元素向父级逐层传递的过程；它需在事件处理函数内调用，只影响当前事件的冒泡路径，不阻止默认行为，也不影响同级监听器执行。

在 JavaScript 中，stopPropagation() 方法用于阻止事件冒泡，即阻止事件从当前目标元素向父级元素逐层传递。

什么是事件冒泡

当用户触发某个子元素上的事件（比如点击），该事件会先在子元素上执行，然后依次向上触发其所有父元素上的相同事件监听器，直到 document 根节点。这个“由内向外”的传播过程就叫事件冒泡。

例如：点击一个按钮（位于 div 内），事件会按顺序触发：button → div → body → html → document。

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

怎么用 stopPropagation() 阻止冒泡

在事件处理函数中调用 event.stopPropagation() 即可中断当前事件的冒泡路径，后续父级元素的同类型事件监听器将不会被触发。

• 必须在事件回调函数内部调用，且通常放在逻辑开头或关键判断之后
• 只影响当前事件实例，不影响其他事件或后续同类事件
• 它不阻止默认行为（如 a 标签跳转、表单提交），如需同时阻止，请搭配 event.preventDefault()

实际使用示例

HTML 结构：

  点我

JavaScript：

document.getElementById('inner').addEventListener('click', function(e) {
  console.log('按钮被点击');
  e.stopPropagation(); // 关键：阻止冒泡
});

document.getElementById('outer').addEventListener('click', function() {
  console.log('外层 div 被点击'); // 这行不会执行
});

注意 stopPropagation 的常见误区

• 不能在事件监听器外部调用，比如写成 e.stopPropagation() 但 e 是未定义的变量
• 如果多个监听器绑定在同一元素上，stopPropagation 不影响同级监听器执行，只影响向上冒泡到父元素
• 和 stopImmediatePropagation() 不同：后者还会阻止该元素上其他同类型监听器执行，而前者不会

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南