preventDefault、stopPropagation 、stopImmediatePropagation 区别

1. event.preventDefault()

作用：阻止浏览器默认行为****和事件传播无关！

常见默认行为：

• a 标签跳转
• form 表单提交
• 鼠标右键弹出菜单
• 输入框输入文字
• 单选 / 复选框勾选

例子：

document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault(); // 不跳转，但事件照样会冒泡！
});

---

2. event.stopPropagation()

**作用：阻止事件冒泡（也阻止捕获）**但：不影响当前元素自身绑定的多个事件

<div id="parent">
  <div id="child">点击我</div>
</div>

child.addEventListener('click', (e) => {
  e.stopPropagation(); // 事件不会传到 parent
});

// 给 child 再绑一个点击
child.addEventListener('click', () => {
  console.log('我依然会执行！'); // ✅ 会执行
});

特点：

• 只拦向外冒泡
• 不拦自己身上的其他同事件

---

3. event.stopImmediatePropagation()

作用：

1. 阻止事件冒泡（和 stopPropagation 一样）
2. 立刻停止当前元素后续绑定的同类型事件

还是上面的例子：

child.addEventListener('click', (e) => {
  e.stopImmediatePropagation();
  console.log('第一个事件');
});

// 这个不会执行了！
child.addEventListener('click', () => {
  console.log('第二个事件'); // ❌ 不执行
});

这就是它和 stopPropagation 的唯一、最大区别。