event.preventDefault() 和 event.stopPropagation() 是两个不同的事件处理方法：

  1. event.preventDefault()：

  • 阻止事件的默认行为

  • 常见用例：

<!-- 阻止表单提交的默认行为 -->
<form @submit="e => {
  e.preventDefault()
  // 自定义提交逻辑
}">

<!-- 阻止链接跳转 -->
<a href="#" @click="e => {
  e.preventDefault()
  // 自定义点击处理
}">

<!-- 阻止右键菜单 -->
<div @contextmenu="e => {
  e.preventDefault()
  // 显示自定义菜单
}">

  1. event.stopPropagation()：

  • 阻止事件冒泡（向上传播）

  • 常见用例：

<div @click="outerClick">
  外层
  <button @click="e => {
    e.stopPropagation()  // 点击按钮时不会触发外层的 click
    innerClick()
  }">
    内层按钮
  </button>
</div>

区别举例：

<template>
  <div @click="outerClick">
    <a href="https://example.com" @click="e => {
      // preventDefault: 阻止链接跳转
      e.preventDefault()
      
      // stopPropagation: 阻止事件传播到外层 div
      e.stopPropagation()
      
      handleClick()
    }">
      点击我
    </a>
  </div>
</template>

总结：

  • preventDefault(): 阻止浏览器的默认行为（如表单提交、链接跳转、右键菜单）

  • stopPropagation(): 阻止事件继续传播到父元素（事件冒泡）

  • 它们可以同时使用，实现不同的目的