stoppropagation()用于阻止事件冒泡，需在子元素事件处理函数中调用；它只阻断传播路径，不影响默认行为，与preventdefault()功能不同。

用 stopPropagation() 阻止事件冒泡，核心是在子元素的事件处理函数中调用它，让事件不再向父级 DOM 逐层上传。这能有效避免点击子元素时意外触发父级绑定的同类型事件（比如 click）。

什么时候必须用 stopPropagation

常见于以下场景：

• 弹出菜单（如下拉框、右键菜单）内部有按钮，点击按钮不希望关闭菜单
• 表格行（<tr>）绑了点击跳转，但行内「删除」图标点击应只执行删除，不触发整行跳转 <li>模态框（Modal）中点击内容区不关闭，但点击遮罩层（父级）才关闭</li> <h3>基本写法：在子元素事件中调用</h3> <p>注意：必须在事件处理函数内部调用，且通常放在逻辑开头或关键判断之后：</p> <font color="#666">JavaScript 示例：</font> <pre class="brush:php;toolbar:false;">document.querySelector('.child-btn').addEventListener('click', function (e) { e.stopPropagation(); // ✅ 关键：阻止事件继续向上冒泡 console.log('只执行子按钮逻辑'); });</pre> <p>此时即使它的父元素（比如 <code>.parent）也监听了 click，也不会被触发。

  和 preventDefault 的区别别搞混

  stopPropagation() 只影响事件传播路径（不往上走），不影响默认行为；
  preventDefault() 只取消默认动作（如链接跳转、表单提交），不阻止冒泡。

  例如点击一个 <a href="/home"></a>：

  • 只调 e.stopPropagation() → 页面仍会跳转，但父级 click 不触发
  • 只调 e.preventDefault() → 页面不跳转，但父级 click 仍会执行
  • 两个都调 → 既不跳转，也不触发父级

  替代方案：事件委托 + 条件过滤

  如果父级用事件委托监听（比如 parent.addEventListener('click', handler)），也可在 handler 中判断目标来源，避免执行无关逻辑：

  parent.addEventListener('click', function (e) {
    if (e.target.classList.contains('child-btn')) {
      // 是子按钮被点，直接 return 或做专门处理
      return;
    }
    // 其他情况才执行父级逻辑
  });

  这种方式更灵活，适合动态增删子元素的场景，但不如 stopPropagation 直观可控。