事件修饰符

最新推荐文章于 2025-05-28 18:15:13 发布

叶落^O^无痕

最新推荐文章于 2025-05-28 18:15:13 发布

阅读量91

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.youkuaiyun.com/qq_58721653/article/details/120605899

版权

本文详细讲解了JavaScript原生和Vue中event.preventDefault()与event.stopPropagation()的区别，并介绍Vue的事件修饰符如何简化事件处理。实例演示了如何在Vue组件中使用.prevent, .stop, .once等修饰符来控制默认行为和事件传播。

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

在原生JavaScript中，通过 event.preventDefault() 阻止默认行为，

event.stopPropagation() 阻止冒泡

在Vue中通过事件修饰符阻止，vue给我们提供了丰富的事件修饰符

.prevent，阻止默认行为
.stop，阻止事件冒泡
.capture 冒泡改为捕获
.self 只处理自己身上的事件，不理会冒泡或捕获
.once 一次性事件，只执行一次
.native 触发原生的事件（有时发现用一些第三方的组件库时，例如一个封装好的button按钮，绑定点击事件却没有任何作用，这时便需要加 .native）

<div id="app">
    <button v-on:click.once="addUser()">添加</button>
    <a href="https:www.baidu.com" @click.prevent='tagHreaf()'>我要去百度</a>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'这是一条测试的数据'
        },
        methods:{
            tagHreaf(){
                alert('就是不让你跳转页面')
            },
            addUser(){
                alert('你击中我了')
            }
        }
    });
</script>