Vue常见的事件修饰符

要努力奋斗鸭

已于 2023-08-07 23:50:22 修改

阅读量2.2k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-08-07 22:56:34 首次发布

本文链接：https://blog.csdn.net/weixin_52512511/article/details/132156525

版权

1.prevent:阻止默认事件(常用)
2. stop:阻止事件冒泡(常用)
3. once:事件只触发一次(常用)
4.captrue:使用事件的捕捉模式(不常用)
5.self:只有event.target是当前操作的元素时才触发事件(不常用)
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)

①.prevent:阻止默认行为

        --对于如<a href="www.baidu.com" @click.prevent="linkMethod">百度</a>自带事件的,添加prevent事件后,href跳转路径将不会触发

②.stop:阻止冒泡

        --对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果子级元素设置@click.stop的话就不会触发父级的click事件

③.once: 事件只触发一次(常用表单提交)

④.capture: 对于冒泡事件,且存在多个冒泡事件时,存在该修饰符的会优先执行,如果有多个,则从外到内执行

⑤.passive: 滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用,浏览器内核线程在每个事件执行时查询prevent,造成卡顿,使用passive将会跳过内核线程查询,进而提升流畅度

⑥.self:仅绑定元素自身触发,防止事件冒泡

        --对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果父级元素设置@click.self的话就不会被子级元素的click事件影响

⑦.native: 将vue组件转换为一个普通的HTML标签,如果该修饰符用在普通html标签上是不起任何作用的

一、阻止默认事件（常用）.prevent

例子：一个简单的超链接标签，我们给一个百度链接和一个单击事件

在这里插入图片描述

查看页面，虽然点击文字出现了弹窗，但是随之跳到了超链接指向的地址

在这里插入图片描述

跳转到链接是a标签的默认行为，那么我们怎么阻止这个默认行为呢？

普通阻止默认行为方式

使用参数对象的preventDefault方法

在这里插入图片描述

这时候浏览器点击文字提示框后就不会跳转了

vue阻止默认行为方式

在vue中，不用我们亲自编写上面的方式，我们可以在事件后面跟一个.prevent就可以阻止默认行为了，效果都是一样的

 <!-- .prevent:阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

在这里插入图片描述

二、阻止事件冒泡（常用）.stop

编写代码，实现例子

在这里插入图片描述

我们发现，单击完确定后会继续弹窗，这就是一个冒泡事件

在这里插入图片描述

阻止的方式和上一个例子类似，我这里以及下面都用vue特定的阻止行为了

我们在单击事件前面加上.stop

<!--   .stop:阻止事件冒泡 -->
<button @click.stop="showInfo">点我提示信息</button>

在这里插入图片描述

再次验证浏览器，解决问题

三、事件只触发一次（常用）.once

编写代码

在这里插入图片描述

如图，按钮点击多少次，就会弹窗多少次

在这里插入图片描述

我们加上once修饰符

<!--   3.once:事件只触发一次 -->
 <button @click.once="showInfo">点我提示信息</button>

四、使用事件的捕捉模式（不常用）.capture

在这里插入图片描述

.capture 实现捕获触发事件的机制。即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。（若有多个该修饰符，则由外而内触发）

   <!--  4.captrue:使用事件的捕捉模式 -->
      <div class="box1" @click.capture="showMsg(1)">
        div1 
        <div  class="box2" @click="showMsg(2)">
            div2
        </div>
      </div>

在这里插入图片描述

五、只有event.target是当前操作的元素时才触发事件(不常用) .self

.self 实现只有点击当前元素时候，才会触发事件处理函数。

 <!--     5.只有event.target是当前操作的元素时才触发事件 -->
      <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>

在这里插入图片描述