vue——18-事件修饰符

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82823998

<div id="enjoy">
    <!--
    使用.stop 阻止冒泡（阻止上级所有层的事件）
    仅son
    -->
    <div class="father" @click="father">
        <div class="son" @click.stop="son"></div>
    </div>

    <!--
    使用.prevent 阻止默认事件
    不会跳转页面
    -->
    <a href="https://www.baidu.com" @click.prevent="preventBehavior">百度一下</a>

    <!--
    使用.capture 添加事件侦听器时使用事件捕获模式（一般默认冒泡事件由里向外）
    先father后son
    -->
    <div class="father" @click.capture="father">
        <div class="son" @click="son"></div>
    </div>

    <!--
    使用.self 实现只有点击当前元素时，才会触发事件函数（仅阻止当前事件冒泡）
    只有点father时弹窗，点son不弹
    -->
    <div class="father" @click.self="father">
        <div class="son" @click="son"></div>
    </div>

    <!--
    使用.once 只触发一次事件处理函数（此例中连带.prevent也失效）
    第一次点击仅弹窗，之后正常跳转不弹窗
    -->
    <a href="https://www.baidu.com" @click.prevent.once="preventBehavior">百度一下</a>
</div>

        {
            new Vue({
                el:'#enjoy',
                data:{},
                methods:{
                    father(){
                        alert('father');
                    },
                    son(){
                        alert('son');
                    },
                    preventBehavior(){
                        alert('hello');
                    }
                }
            })
        }