Vue事件修饰符（.stop .capture .self .once .prevent .passive）

.stop 阻止事件向上(向父级)冒泡

<div id="app">
    <main v-on:click="listener($event, 'Outer')">
        Outer
        <section v-on:click="listener($event, 'Middle')">
            Middle
            <!-- .stop阻止此元素向上冒泡 -->
            <a v-on:click.stop="listener($event, 'Inner')"> Inner </a>
        </section>
    </main>
</div>

 

.capture 在捕获阶段触发监听函数

只在捕获阶段触发，不会在冒泡阶段触发。要想两个阶段都触发，只能写两套。

<div id="app">
    <!-- .capture 当元素发生冒泡时，有该事件修饰符，就先触发谁 -->
    <main v-on:click.capture="listener($event, 'Outer')">
        Outer
        <section v-on:click="listener($event, 'Middle')">
            Middle
            <a v-on:click="listener($event, 'Inner')"> Inner </a>
        </section>
    </main>
</div>

 

.self 表示事件只由本身触发，不是来自子节点

<div id="app">
    <main v-on:click="listener($event, 'Outer')">
        Outer
        <!-- .self表示事件由本身触发，不是来自子节点。 -->
        <section v-on:click.self="listener($event, 'Middle')">
            Middle
            <a v-on:click="listener($event, 'Inner')"> Inner </a>
        </section>
    </main>
</div>

 

.once 事件将只会触发一次

<div id="app">
    <main v-on:click="listener($event, 'Outer')">
        Outer
        <!-- .once 事件将只会触发一次 -->
        <section v-on:click.once="listener($event, 'Middle')">
            Middle
            <a v-on:click="listener($event, 'Inner')"> Inner </a>
        </section>
    </main>
</div>

.prevent 是拦截默认事件

某些标签拥有自身的默认事件，如a[href="#"]，button[type="submit"] 这种标签在冒泡结束后会开始执行默认事件。

注意默认事件虽然是冒泡后开始，但不会因为stop阻止事件传递而停止。

<div id="app">
    <main v-on:click="listener($event, 'Outer')">
        Outer
        <section v-on:click="listener($event, 'Middle')">
            Middle
            <!-- .prevent 是拦截默认事件 -->
            <a v-on:click.prevent="listener($event, 'Inner')" href="https://www.baidu.com"> Inner </a>
        </section>
    </main>
</div>

.passive 是不拦截默认事件

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

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

一般用在滚动监听，@scoll，@touchmove 。

<div id="app">
    <main v-on:click="listener($event, 'Outer')">
        Outer
        <section v-on:click="listener($event, 'Middle')">
            Middle
            <!-- .passive 是不拦截默认事件 -->
            <a v-on:click.passive="listener($event, 'Inner1')" href="https://www.baidu.com">百度一下</a>
        </section>
    </main>
</div>

.capture .once .passive本质上就是给上述三个Boolean值赋true。     

/**0
 * capture: 表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
 * 
 * passive: 表示 listener 永远不会调用 preventDefault()。
 *          如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
 *          
 * once:    表示 listener 在添加之后最多只调用一次。
 *          如果是 true，listener 会在其被调用之后自动移除。
 */
addEventListener(type, listener ,
       {capture: Boolean, passive: Boolean, once: Boolean});

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。

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

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。.passive 会告诉浏览器你不想阻止事件的默认行为。