vue事件修饰符

最新推荐文章于 2025-04-04 19:37:05 发布

不见蝴蝶不见君。

最新推荐文章于 2025-04-04 19:37:05 发布

阅读量248

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/gabby____/article/details/89396457

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了Vue.js中的事件修饰符，包括.stop（阻止冒泡）、.prevent（阻止默认事件）、.capture（事件捕获模式）、.self（仅自身触发）、.once（事件触发一次）以及它们之间的区别，帮助理解如何在Vue应用中有效控制事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once事件只触发一次

一、.stop（使用.stop阻止冒泡）

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

<style>
    .inner{
        height:150px;
        background-color:lightskyblue;
    }
</style>
<body>
<div id="app">
    <div class="inner"@click="divHandler">
    <input type="button"value="戳他"@click.stop="btnHandler">
    </div>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler(){
              console.log("这是触发了inner div的点击事件")
            },
    btnHandler(){
                console.log("这是触发了按钮的点击事件")
    }
        },
    })
</script>

加stop:

点击按钮结果

点击蓝色区域

不加.stop

点击按钮结果

点击蓝色区域结果

二、.prevent

<style>
    .inner{
        height:150px;
        background-color:lightskyblue;
    }
</style>
<body>
<div id="app">
    <!--div class="inner"@click="divHandler">
    <input type="button"value="戳他"@click.stop="btnHandler">
    </div>-->
    <a href="http://www.baidu.com"@click.prevent="linkClick">百度一下</a>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler(){
              console.log("这是触发了inner div的点击事件")
            },
    btnHandler(){
                console.log("这是触发了按钮的点击事件")
    },
            linkClick(){
                console.log("这是触发了链接的点击事件")
            }
        },
    })
</script>

不加.prevent，点击链接可以正常跳转。

加.prevent,显示链接但点击不可跳转，结果如图：

三、.capture

<style>
    .inner{
        height:150px;
        background-color:lightskyblue;
    }
</style>
<body>
<div id="app">
    <div class="inner"@click.capture="divHandler">
    <input type="button"value="戳他"@click="btnHandler">
    </div>
    <a href="http://www.baidu.com"@click.prevent="linkClick">百度一下</a>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler(){
              console.log("这是触发了inner div的点击事件")
            },
    btnHandler(){
                console.log("这是触发了按钮的点击事件")
    },
            linkClick(){
                console.log("这是触发了链接的点击事件")
            }
        },
    })
</script>
</body>

点击按钮后，先触发div再触发按钮

四、.self

不受捕获或冒泡影响，只有点击这个元素自己，才会触发事件处理函数。

<style>
    .inner{
        height:150px;
        background-color:lightskyblue;
    }
</style>
<body>
<div id="app">
    <div class="inner"@click.self="divHandler">
    <input type="button"value="戳他"@click="btnHandler">
    </div>
    <a href="http://www.baidu.com"@click.prevent="linkClick">百度一下</a>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler(){
              console.log("这是触发了inner div的点击事件")
            },
    btnHandler(){
                console.log("这是触发了按钮的点击事件")
    },
            linkClick(){
                console.log("这是触发了链接的点击事件")
            }
        },
    })
</script>

点击按钮结果

五、.once

<body>
<div id="app">
    <a href="http://www.baidu.com"@click.prevent.once="linkClick">百度一下</a>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{},
        methods:{
            linkClick(){
                console.log("这是触发了链接的点击事件")
            }
        },
    })
</script>

加上.once，只触发一次事件处理函数。

第一次点击链接结果：

第二次：链接被打开，但控制台不再输出

六、.stop和.self的区别

.self和.stop区别: .self只是阻止自身不执行冒泡触发,不会阻止冒泡继续向外部触发；

.stop是从自身开始不向外部发射冒泡信号；

.self结果

.stop结果

总结：

.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行