vue 的修饰符

vue 的修饰符有 once stop prevent captrue self

• stop 阻止冒泡
• once 只会触发一次点击事件
• prevent 取消默认点击事件
• captrue 捕获阶段触发父级事件
• self 只作用于目标dom事件

案例

image.png

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<div @click="log(1)">
      区域1
      <a href="/#a" @click.prevent.self="log(2)">
         区域2
        <div @click="log(3)">区域3</div>
      </a>
</div>

输出3 和1 ， prevent 阻止a标签的跳转， self 阻止了log(2)的执行

<div @click="log(1)">
      区域1
      <a href="/#a" @click.self.prevent="log(2)">
         区域2
        <div @click="log(3)">区域3</div>
      </a>
</div>

输出3 和1 ， self 阻止了log(2)的执行, self 都不执行了，prevent 就失效了，所以a标签可以跳转。