Vue事件修饰符

最爱恰猪蹄

已于 2024-02-15 19:27:38 修改

阅读量202

点赞数 4

文章标签： vue.js javascript 前端

于 2024-02-15 19:26:35 首次发布

本文链接：https://blog.csdn.net/TUTOUXU/article/details/136122619

版权

本文详细介绍了Vue中常用的事件修饰符，如.stop阻止冒泡、.prevent阻止默认行为、.capture事件捕获、.self仅处理自身元素事件、.once事件仅触发一次以及.passive与.prevent的关系。实例演示了如何在Vue组件中应用这些修饰符。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <script src="../js/vue.js"></script>
    <style>
        .divList{
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            overflow: auto;
        }
        .item{
            width: 300px;
            height:200px;
        }
    </style>
</head>
<body>
    
</body>
    <!--
        Vue当中提供的事件修饰符：
        .stop: 停止事件冒泡，等同于 event.stopPropagation()。
        .prevent: 等同于event.preventDefault()阻止事件的默认行为。
        .caputure: 添加事件监听器时使用事件捕获模式
            添加事件监听器包括两种不同的方式：
                一种时从内到外添加。（事件冒泡模式）
                一种是从外到内添加。（事件捕获模式)
        .self: 这个事件如果是“我自己元素”上发生的事件，这个时间不是别人给我传递过来的事件，则执行对应的程序。
        .once: 事件只发生一次。
        .passive:passive翻译为顺从/不抵抗。无需等待，直接继续（立即）执行事件的默认行为。
                    .passive 和 .prevent 修饰符是对立的。不可以共存。（如果一起用，就会报错)
                    .prevent:阻止事件的默认行为。
                    .passive: 解除阻止。
    -->

    <!-- 容器 -->
    <div id="app">
        <h1>{{msg}}</h1>

        <!-- 阻止事件的默认行为 -->
        <a href="https://www.baidu.com" @click.prevent="yi">百度</a> <br><br>

        <!-- 停止事件冒泡 -->
        <div @click="san">
            <div @click="er">
                <button @click="yi">事件冒泡</button>
            </div>
        </div>



           <!-- 添加事件监听器时使用事件捕获模式  -->
        <div @click.capture="san">
            <div @click="er">
                <button @click="yi">添加事件监听器的时候采用事件捕获模式</button>
            </div>
        </div>


        <!-- 
            在Vue当中，事件修饰符是可以联合使用的，
            但需要注意，
            @click.self.stop 是由顺序去别的，是先.self后.stop
        -->
        <div @click="san">
            <div @click="er">
                <button @click.self.stop="yi">self修饰符</button>
            </div>
        </div>


        
        <div>
            <button @click.once="yi">self修饰符</button>
        </div>

        <div class="divList" @wheel.passive="testPassive">
            <div class="item">div1</div>
            <div class="item">div2</div>
            <div class="item">div3</div>
        </div>

    </div>


    

    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : '事件修饰符'
            },

            methods : {
                yi(enent){
                    //在Vue当中，这种事件的默认行为可以不采用手动调用DOM的方式来完成。可以使用事件修饰符：prevent。
                    //event.preventDefault()
                    alert(1)
                },
                er(){
                    alert(2)
                },
                san(){
                    alert(3);
                },
                testPassive(){
                    for(let i = 0 ;i < 1000000; i++)
                    {
                        console.log('testPassive');
                    }
                }
            }
        })
    </script>

</html>