Vue事件修饰符

最新推荐文章于 2024-04-04 11:02:50 发布

进阶的菜熊

最新推荐文章于 2024-04-04 11:02:50 发布

阅读量555

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44998582/article/details/122282206

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在vue中为我们提供了六种修饰符，分别是：

prevent:阻止默认事件
stop:阻止事件冒泡
once:事件只触发一次
capture:使用事件的捕获模式
self:只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

下面就具体来说说六种修饰符的具体用法

prevent

prevent方法是用来阻止默认事件。我们知道在html中有很多标签都有自己默认的事件。比如a标签点击时会跳转到目标链接，from里面的提交按钮点击后会将表单内容提交到目标地址等等，这些都属于默认事件。但是有时候我们不希望这些默认事件执行，那么这个时候我们就能用到prevent去阻止默认事件执行

//js中的用法,是通过event中的preventDefault()方法去阻止的
 var a=document.querySelector('a');
 a.onclick = function (e) {
        e.preventDefault()
    }
//vue中用法
<a href="http://www.baidu.com" v-on:click.prevent='showmes'>百度</a>

stop

stop方法是用来阻止事件冒泡。我们在学习js时有了解到事件发生时会经历捕获与冒泡阶段，当父元素与子元素同时绑定了相同的事件时当触发子元素的事件时父元素的事件也会被触发，就会出现意料之外的效果，那么就需要我们进行设置避免这种意外产生，我们就需要用到stop这一修饰符

//js中，通过event中的stopPropagation()方法去阻止
var button=document.querySelector('button');
 button.onclick = function (e) {
        e.stopPropagation()
    }
//vue中使用stop
<div id="app">
        <div v-on:click="showmes">
            <button v-on:click.stop="showtip">点击</button>
        </div>
    </div>

因为冒泡是从最底层元素往上走，所以只要往最底层加stop就可以了。如果div上面还有一层同时也加了click事件那么div也要加stop修饰符

once

once用于实现绑定的事件只触发一次的效果，如一个提交按钮在页面打开后只允许提交一次，后面再提交就不再实现底层逻辑代码。

<button v-on:click.once="showtip">点击</button>

capture

capture用于事件的捕获模式。我们知道js是在冒泡阶段才开始处理事件，如果我们想使一个事件在捕获阶段就被执行处理就可以加上capture修饰符。如以下代码，在未加修饰符的情况下输出的应该是

我是按钮
我是div

而在div上加了修饰符后输出的结果便是

我是div
我是按钮

<body>
<div id="app">
        <div v-on:click.capture="showmes">
            <button v-on:click="showtip">点击</button>
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        methods: {
            showmes() {
                console.log('我是div')
            },
            showtip() {
                console.log('我是按钮')
            }
        }
    })

self

在前面的例子中我们有了解到在父、子元素绑定相同的事件时，当子元素上的事件被触发时父元素上的事件也会被触发，我们用了stop修饰符对其进行了阻止冒泡，而self也能达到这个效果。但是self是用event中的target与冒泡阶段中的各元素进行比较，只有元素与target一致才会执行事件。

<div v-on:click.self="showmes">
            <button v-on:click="showtip">点击</button>
        </div>
    </div>

以上代码加入self后在点击button时div不再被执行，因为此时的target对应着button元素

passive

passive实现事件的默认行为立即执行，无需等待事件回调执行完毕。主要用于移动端的scroll事件，用来提高浏览器响应速度，提升用户体验。比如现在在代码中加入了scroll事件，在滚动页面时就去执行特别复杂或者用时长的事情，那么这个时候滚动条就会出现长时间的卡顿，直到代码执行完后滚动条才带着页面上移或下移，这会让人体验不好。为避免以上这种情况我们可以加上passive修饰符，不需要等到事件执行完后再滚动，而是先滚动再执行。

进阶的菜熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue事件修饰符

在vue中为我们提供了六种修饰符，分别是： prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:只有event.target是当前操作的元素时才触发事件 passive：事件的默认行为立即执行，无需等待事件回调执行完毕下面就具体来说说六种修饰符的具体用法preventprevent方法是用来阻止默认事件。我们知道在html中有很多标签都有自己默认的事件。比如a标..
复制链接

扫一扫