Vue事件修饰符

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

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

    <div @click="clickDiv">
        <button @click.stop="clickButton">按钮</button>
         <!-- 使用 .stop 可以阻止事件的冒泡,这样在点击button的时候不会触发外部的div点击事件 -->
    </div>

• prevent 是阻止事件本身行为,如阻止超链接的点击跳转, form 表单的点击提交

    <a href="http://www.baidu.com" @click.prevent>百度</a>
    <!-- 使用 .prevent 阻止默认事件，这里阻止了超链接的跳转 -->

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

    <div @click="oDiv">
        <div @click.self="clickDiv">
            <!-- .self是将事件设置为只有自己本身触发的时候才触发 -->
            <!-- 如果是冒泡传递上来的事件不触发自身事件 -->
            <!-- 这里点击button会触发 clickButton 和 oDiv ,而不会触发 clickDiv -->
            <button @click="clickButton">按钮</button>
        </div>
    </div>   

• capture 是改变 js 默认的事件机制（冒泡）, capture 功能是将冒泡改为捕获模式

    <div @click.capture="clickDiv">
        <!-- 使用 .capture 让js的监听机制从冒泡改为捕获 -->
        <!-- 冒泡是从里往外触发,捕获是从外往里触发 -->
        <!-- 这里会先弹出div的弹窗事件,然后触发button弹窗 -->
        <button @click="clickButton">按钮</button>
    </div>

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

    <button @click.once="clickButton">按钮</button>
    <!-- .once 设置事件只执行一次 -->
    <!-- 这里第一次点击会执行clickButton 方法，之后都不行 -->

stop 与 self 的区别

self 只是阻止自身不执行冒泡触发,不会阻止冒泡继续向外部触发, stop 是从自身开始不向外部发射冒泡信号

转载于:https://www.cnblogs.com/sakura666/p/11265613.html