stopPropagation 阻止冒泡 preventDefault 区别

stopPropagation() 和 preventDefault() 是事件对象（event）上两个非常重要的方法，它们的作用完全不同。理解它们的区别对于处理 DOM 事件至关重要。

1. preventDefault()

• 作用： 阻止事件的默认行为。

• 影响范围： 只影响当前事件本身的默认动作，不影响事件在 DOM 树中的传播（冒泡或捕获）。

• 常见场景：
  • 阻止链接（<a>）的跳转。
  • 阻止表单（<form>）的提交。
  • 阻止右键菜单的弹出。
  • 阻止键盘输入（在 keydown/keypress 事件中）。

• 示例：

  const link = document.getElementById('myLink');
  link.addEventListener('click', function(event) {
      event.preventDefault(); // 阻止链接跳转到 href 指定的页面
      console.log('链接被点击了，但页面没有跳转');
      // 事件仍然会冒泡到父元素
  });

2. stopPropagation()

• 作用： 阻止事件继续在 DOM 树中传播（即阻止冒泡或捕获）。
• 影响范围： 阻止事件向父级（或子级，如果是捕获阶段）元素传播，但不影响事件本身的默认行为。
• 常见场景：
  • 点击一个模态框（Modal）内部时，不希望点击事件冒泡到背景遮罩层导致模态框关闭。
  • 在一个复杂的嵌套菜单中，点击子菜单项时，不希望触发父菜单的点击逻辑。
  • 实现事件委托时，需要在特定条件下阻止事件到达委托的父元素。

• 示例：

  const child = document.getElementById('child');
  const parent = document.getElementById('parent');
  
  parent.addEventListener('click', function() {
      console.log('父元素被点击');
  });
  
  child.addEventListener('click', function(event) {
      event.stopPropagation(); // 阻止点击事件冒泡到父元素
      console.log('子元素被点击');
      // 注意：如果 child 是一个链接，它仍然会跳转（默认行为未被阻止）
  });

关键区别总结

两者结合使用

在实际开发中，经常需要同时调用这两个方法。

经典例子：点击模态框内部，既不关闭模态框（阻止冒泡），也不执行链接跳转（阻止默认行为）。

const modal = document.getElementById('modal');
const modalLink = document.getElementById('modalLink');

// 点击模态框背景关闭
modal.addEventListener('click', function(event) {
    // 假设点击背景（非内容区域）才关闭
    if (event.target === modal) {
        modal.style.display = 'none';
    }
});

// 点击模态框内的链接
modalLink.addEventListener('click', function(event) {
    event.preventDefault();      // 1. 阻止链接跳转 (默认行为)
    event.stopPropagation();     // 2. 阻止事件冒泡到 modal，防止模态框关闭
    console.log('模态框内的链接被点击，但页面没跳转，模态框也没关闭');
});

stopImmediatePropagation()

还有一个相关方法 stopImmediatePropagation()，它比 stopPropagation() 更彻底：

1. 阻止事件冒泡到父元素。
2. 阻止当前元素上其他同类型事件处理函数的执行。

element.addEventListener('click', function(e) {
    console.log('Handler 1');
    e.stopImmediatePropagation(); // 阻止后续处理函数和冒泡
});

element.addEventListener('click', function(e) {
    console.log('Handler 2'); // 这个不会执行！
});

parentElement.addEventListener('click', function() {
    console.log('Parent clicked'); // 这个也不会执行！
});

总结

• preventDefault() 是关于“做什么”——阻止浏览器对这个事件的常规反应（如跳转、提交）。
• stopPropagation() 是关于“告诉谁”——阻止这个事件通知它的父元素（或子元素）。

简单记忆：

• preventDefault() -> 阻止默认动作。
• stopPropagation() -> 阻止向上（或向下）喊话。

js冒泡 js禁用默认事件 JavaScript阻止冒泡

https://blog.xqlee.com/article/2508271716463630.html