事件修饰符

1️⃣ .stop

作用：阻止单击事件继续传播（阻止事件冒泡和事件捕获）

<template>
  <div @click="divClick">
    <button @click="btn1Click">按钮_1</button>
    <button @click.stop="btn2Click">按钮_2</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  setup() {
    const divClick = function () {
      console.log('div')
    }

    const btn1Click = function () {
      console.log('btn_1')
    }

    const btn2Click = function () {
      console.log('btn_2')
    }

    return { divClick, btn1Click, btn2Click }
  },
}
</script>

<!--
结果：

点击按钮_1：btn_1、div
点击按钮_2：btn_2
 -->

---

2️⃣ .prevent

作用：阻止默认事件的发生。

比如阻止 a 标签的默认事件：

<template>
  <a href="http://www.weibo.com" @click="goToWeibo">微博</a>
  <a href="http://www.baidu.com" @click.prevent="goToBaidu">百度</a>
</template>

<script>
export default {
  name: 'App',
  setup() {
    const goToWeibo = function () {
      console.log('微博')
    }

    const goToBaidu = function () {
      console.log('百度')
    }

    return { goToBaidu, goToWeibo }
  },
}
</script>

<!--
结果：

点击'微博'：打印出'微博'，然后跳转到微博首页。
点击'百度'：打印出'百度'，但不跳转到百度首页。
 -->

---

3️⃣ .capture

作用：开启事件捕获模式（即内部元素触发事件时先在此处理，然后才交由内部元素处理）。

<template>
  <div @click.capture="divClick">
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  setup() {
    const divClick = function () {
      console.log('div')
    }

    const btnClick = function () {
      console.log('btn')
    }

    return { divClick, btnClick }
  },
}
</script>

<!--
结果：

点击按钮：div、btn
 -->

---

4️⃣ .self

作用：当事件发生在自身时才会触发（即event.target是当前元素时触发处理函数）。

<template>
  <div class="outsideDiv" @click.self="outsideDivClick">
    <div class="insideDiv" @click="insideDivClick">
      <button @click="btnClick">按钮</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  setup() {
    const outsideDivClick = function () {
      console.log('outsideDiv')
    }

    const insideDivClick = function () {
      console.log('insideDiv')
    }

    const btnClick = function () {
      console.log('btn')
    }

    return { outsideDivClick, insideDivClick, btnClick }
  },
}
</script>

<style>
.outsideDiv {
  width: 100px;
  height: 100px;
  background: orange;
}

.insideDiv {
  width: 50px;
  height: 50px;
  background: pink;
}
</style>

<!--
结果：

点击按钮：btn、insideDiv（不打印 outsideDiv 是因为 event.target 是 btn）
点击外层div：outsideDiv（只有直接点击最外层div才会打印 outsideDiv）
 -->

---

5️⃣ .once

作用：点击事件将只会触发一次。

<template>
  <button @click="btn1Click">按钮_1</button>
  <button @click.once="btn2Click">按钮_2</button>
</template>

<script>
export default {
  name: 'App',
  setup() {
    const btn1Click = function () {
      console.log('btn_1')
    }

    const btn2Click = function () {
      console.log('btn_2')
    }

    return { btn1Click, btn2Click }
  },
}
</script>

<!--
结果：

点击按钮_1：点击 n 次就打印 n 个 'btn_1'。
点击按钮_2：不管点击多少次，都只打印一个 'btn_2'。
 -->

---

6️⃣ .passive

好文章推荐_1

好文章推荐_2