event.preventDefault、stopPropagation、stopImmediatePropagation 的区别

event.preventDefault()

• 作用：阻止元素的默认行为（如链接跳转、表单提交、右键菜单等）
• 不影响事件传播：冒泡和捕获继续执行
• event.defaultPrevented 可检查是否已被阻止
• 示例：a 标签点击 → e.preventDefault() 阻止页面跳转

event.stopPropagation()

• 作用：阻止事件继续在 DOM 树中传播（阻止后续捕获和冒泡）
• 当前元素上绑定的其他同类型事件仍然执行
• 示例：父容器和子容器都有点击事件，点击子容器时不触发父容器

event.stopImmediatePropagation()

• 作用：不仅阻止传播，还阻止当前元素上后续注册的同类型事件处理函数执行
• 比 stopPropagation 更强：如果元素绑定了多个 click 监听器，执行第一个时调用此方法，后面的都不执行

对比总结：

elem.addEventListener('click', e => {
  e.stopPropagation();         // 阻止冒泡到父级
  // e.stopImmediatePropagation(); // 还阻止同元素其他事件
  // e.preventDefault();           // 阻止默认行为
});