Vue 常用事件修饰符（prevent、stop、capture、self、once）」2024年7月23日

于 2024-07-24 11:18:57 发布
阅读量363 收藏 4
点赞数 9
分类专栏： vue学习笔记 文章标签： 笔记 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43543590/article/details/140635088
版权

1.prevent，阻止默认事件

2.stop，阻止冒泡（从内部传递到外部）

当我们有如下嵌套的div时

点击‘子元素’会得到以下结果

给‘子元素添加.stop’

点击后只会输出‘子元素’，stop阻值了向上传递的过程

3.capture,事件捕获修饰符（事件捕获，从外部传递到内部）

当我们有一个嵌套的时

点击最内层的div会得到以下结果

给某个div添加.capture

得到以下结果

当给所有div都添加capture时

就会获得以下结果

由此可见当添加.captur时事件是从外往里捕获。

4.self，修饰符当自身元素被触发时才会触发事件处理器

当没有加修饰符时

点击‘子元素’输出的结果为

给‘父元素’添加.self修饰符，输出的结果为

当使用.self修饰符时，事件处理器只会在点击该div本身才会触发，冒泡和捕获不会触发。

5.once，修饰符，事件最多只能被触发一次

没添加修饰符时

多次点击输出多次

添加.once,多次点击，结果只会输出一次

芳芳@
关注
专栏目录
Vue事件处理器：事件绑定基础、事件修饰符：stop、prevent、capture、self、once；
YY的博客
11-21 570
Vue事件处理器：事件绑定基础、事件修饰符：stop、prevent、capture、self、once；
vue中阻止click事件冒泡,防止触发另一个事件的方法
08-28
下面小编就为大家分享一篇vue中阻止click事件冒泡,防止触发另一个事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中的修饰符
田兴的博客
09-17 8806
一、事件修饰符 .stop 阻止事件继续传播 .prevent 阻止标签默认行为 .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件将只会触发一次 .passive 告诉浏览器你不想阻止事件的默认行为 <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事
Vue 事件处理 -- 事件修饰符（prevent、stop、capture、self、once）
libingjiedd的博客
04-05 1674
5.self：只有event.target是当前操作的元素时才触发事件；如果不使用Vue指令，那么怎么阻止事件冒泡呢？1.prevent：阻止默认事件（常用）；4.capture：使用事件的捕获模式；//阻止 vue 在启动时生成生产提示。3.once：事件只触发一次（常用）；-- 阻止默认事件（常用） -->2.stop：阻止事件冒泡（常用）；-- 引入Vue -->-- 准备好一个容器–>如果不加指令会怎么样？
vue中阻止click事件冒泡（防止触发另一个事件）的方法
热门推荐
weixin_42365757的博客
08-25 4万+
方法一：使用vue阻止子级元素的click事件冒泡。简单得：可以直接用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1，就不会触发div绑定时间test1()方法。 方法二：可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @
vue中的.capture .self .prevent .stop .once区分，初步理解
ssza02的博客
10-09 557
capture和self主要是函数执行顺序的问题 .capture先执行父级的函数，再执行子级的触发函数(一般用法)， 即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。 <div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-colo...
Vue的v-bind属性绑定和v-on事件触发及事件修饰符(.stop、.prevent、.capture、.self、.once)
01-08
在vue里定义了个名为mytitle的属性 var vm=new Vue({ el:#app, data:{ mytitle:This is a title! }, }) 此时 如果 是不行的 此时 只会将mytitle当作普通字符串 并不会去vue实例中寻找对应的属性 此时 可用...
20 六种事件修饰符：stop、prevent、capture、self、once和passive解决冒泡事件.pdf
12-16
为了更好地控制事件的传播和行为，Vue提供了六种事件修饰符：`stop`、`prevent`、`capture`、`self`、`once`和`passive`。这些修饰符可以帮助开发者精确地管理事件，避免不必要的复杂性。 1. **stop修饰符**： 当...
vue事件修饰符和按键修饰符用法总结
12-03
3. `.capture`：此修饰符将事件监听器设置为在事件捕获阶段触发，而不是默认的冒泡阶段。 4. `.self`：只有当事件是在当前元素上触发时，事件处理函数才会执行。即使事件是从子元素冒泡上来的，只要不是直接在当前...
vue 事件修饰符（stop、 .capture 、.self、.prevent、.once）
weixin_40624809的博客
12-30 395
stop：阻止冒泡事件。即：放在谁上，就从谁开始不冒泡（放在被点击的元素身上，自身的点击事件会触发）。 capture：捕获触发机制。即：无论点击谁，先触发带有capture的。 self：自身不参与冒泡事件。即：冒泡事件照常进行，带有self的不参与。 prevent：阻止默认事件。 once：只触发一次事件。即：阻止默认事件，就阻止一次、div的click事件就只执行一次。 <!DOCTYPE html> <html> <head> <meta ch.
vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
张兴华的博客
06-20 1万+
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是...
vue 阻止事件冒泡和捕获
学习 记录 总结 分享
05-10 5355
阻止事件冒泡: 阻止事件默认行为: 事件只作用在元素本身，而不是其子元素要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法。
vue中的时间修饰符stop,self
weixin_30593261的博客
05-14 163
stop阻止自身以外的冒泡 self只会阻止自身冒泡 转载于:https://www.cnblogs.com/andyZhang0511/p/10865383.html
vue常用修饰符-- stop,prevent,.enter,once,lazy,number,trim
m0_65730686的博客
08-16 519
vue常用修饰符-- stop,prevent,.enter,once,lazy,number,trim
vue 阻止事件冒泡，捕获方法
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
09-23 1万+
要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法 1. js 事件的三阶段 捕获阶段 目标阶段:执行当前对象的事件处理程序 冒泡阶段 2. js 阻止事件冒泡，捕获 阻止事件冒泡： event.stopPropagation() 或 event.cancelBubble = true (IE) 阻止浏览器默认行为： event.preve...
JavaScript 事件流模型机制 及 Vue .stop、.prevent、.capture、.self、.once、.passive事件修饰符高阶组合使用指南
最新发布
JINGWHALE
06-26 1281
本文详细介绍了事件流的两种模型机制、Vue 事件修饰符.stop、.prevent、.capture、.self、.once、.passive以及事件流 高阶组合使用场景、阻止事件冒泡场景、阻止事件捕获场景等内容。通过实例讲解如何利用高阶事件修饰符精炼地控制事件行为，提升前端应用的交互体验。
Vue中的event阻止事件冒泡、默认事件
mm_hello11的博客
10-04 9309
vue的事件对象： @dragstart=’drag(event)′，在函数中传evevt ，函数中接收一下，事件对象就有了。 &lt;div class="select-item" draggable='true' @dragstart='drag($event)' v-for="item in items"&gt;{{item.name}} //传输事件对象 &lt;/div&gt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值