vue 事件修饰符

<template>
  <div>
    <!-- .stop 阻止事件冒泡 -->
    <button @click.stop="handleClick">阻止冒泡</button>

    <!-- .prevent 阻止默认行为 -->
    <a href="https://example.com" @click.prevent="handleClick">阻止默认行为</a>

    <!-- .capture 在捕获阶段触发事件处理函数 -->
    <div @click.capture="handleClick">捕获阶段触发</div>

    <!-- .once 只触发一次事件 -->
    <button @click.once="handleClick">只触发一次</button>

    <!-- .self 只当事件是从监听的元素本身触发时才触发 -->
    <div @click.self="handleClick">
      <button>点击我不会触发父级事件</button>
    </div>

    <!-- .passive 表示事件不会调用 preventDefault() -->
    <div @touchstart.passive="handleTouchStart">被动事件处理器</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('按钮被点击了', event);
    },
    handleTouchStart(event) {
      console.log('触摸开始', event);
    }
  }
};
</script>

解释说明：

• .stop：阻止事件冒泡，即阻止事件传播到父级元素。
• .prevent：阻止事件的默认行为，例如阻止链接跳转或表单提交。
• .capture：在捕获阶段触发事件处理函数，而不是在冒泡阶段。
• .once：事件只会触发一次，之后该事件监听器将被移除。
• .self：只有当事件是由绑定事件的元素本身触发时，才会执行处理函数。如果事件是由子元素触发的，则不会执行。
• .passive：表示事件不会调用 preventDefault()，通常用于优化滚动等性能敏感的操作。