VUE的事件修饰符总结

.once

是将事件设置为只执行一次。如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件不再阻止。

<div v-on:click.once="alert(1)">
    只能执行一次，再次点击不会起作用 //无once每次点击都可执行
</div>

<a href="https://www.baidu.com" v-on:click.prevent.once>只阻止第一次默认跳转行为 //无once每次点击都可跳转百度</a>
<!-- 只有修饰符，修饰符可以单独存在 -->

 

.prevent

是阻止事件本身默认行为,如阻止超链接的点击跳转,form表单的点击提交，都会自己执行，prevent直接不让你提交了，也不跳转，只是执行自己命名的函数。

<form v-on:submit.prevent="alert('1')">
    <input type="submit" name="">  //不提交表单仅仅弹框 无prevent默认提交
</form>

<a href="https://www.baidu.com"  @click.prevent="alert('2')">不跳转仅仅弹框 //无prevent默认跳转</a>

 

.passive

立即触发执行事件的默认行为 (即滚动行为) ，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

你们可能会问，明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。

        【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。】

        通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。

        这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。

注：passive和prevent冲突，不能同时绑定在一个监听器上

 

.capture

capture即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。

改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式,capture决定执行顺序，有capture的提高执行优先级。

<div v-on:click.capture="alert(2)">
    <div v-on:click="alert(1)">
        先2后1  //无capture为：12
    </div>
</div>

<div v-on:click.capture="alert(3)">
    <div v-on:click="alert(2)">
        <div v-on:click.capture="alert(1)">
            先3再1后2//无capture为：123
        </div>
    </div>
</div>

 

.stop

是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件

<div v-on:click.capture.stop="alert(2)">
    <div v-on:click="alert('1')">
        只弹2  //无stop为21
    </div>
</div>

<div v-on:click="alert(3)">
    <div v-on:click.stop="alert(2)">
        <div v-on:click="alert('1')">
            先1后2 //无stop为：123
        </div>
    </div>
</div>

<div v-on:click.capture="alert(3)">
    <div v-on:click.capture.stop="alert(2)">  <!-- 修饰符可以串联 -->
        <div v-on:click="alert('1')">
            先3后2 //无stop为：321
        </div>
    </div>
</div>

<div v-on:click="alert(3)">
    <div v-on:click.capture.stop="alert(2)">
        <div v-on:click.capture="alert('1')">
            只弹2  //无stop为：213
        </div>
    </div>
</div>

 

.self

是只有是自己触发的自己才会执行,如果是接受到内部的冒泡事件传递信号触发,会忽略掉这个信号，self是只执行子级本身的函数

<div v-on:click.capture.self="alert(2)">
    <div v-on:click="alert('1')">
        只弹1 //无self为：21
    </div>
</div>
<div v-on:click="alert(3)">
    <div v-on:click.self="alert(2)">
        <div v-on:click="alert('1')">
            先1后3 //无self为：123
        </div>
    </div>
</div>
<div v-on:click.capture="alert(3)">
    <div v-on:click.capture.self="alert(2)">
        <div v-on:click="alert('1')">
            先3后1 //无self为：321
        </div>
    </div>
</div>
<div v-on:click="alert(3)">
    <div v-on:click.capture.self="alert(2)">
        <div v-on:click.capture="alert('1')">
            先1后3  //无self为：213
        </div>
    </div>
</div>
<div v-on:click="alert(3)">
    <div v-on:click="alert(2)">
        <div v-on:click.self="alert('1')">
            先1再2后3  //无self为：123【此时self所在的弹框非冒泡事件，所以会执行】
        </div>
    </div>
</div>

.self 和 .stop 区别:

self只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。

stop是响应经过冒泡触发的事件，但从自身开始不向外部发射冒泡信号。

使用修饰符时，顺序很重要：

      相应的代码会以同样的顺序产生。

      因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。