vue中的事件修饰符

最新推荐文章于 2024-08-15 19:36:37 发布
最新推荐文章于 2024-08-15 19:36:37 发布
阅读量243 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50304773/article/details/108653216
版权

vue中的事件修饰符

(1).stop // 阻止事件继续传播 即阻止它的捕获和冒泡过程
实例：如下点击内部点击，阻止了冒泡过程，即只执行tz这个方法，如果不加.stop，讲先执行方法，后执行gett方法。即通过了冒泡这个过程。

（2）.prevent //阻止默认事件发生 即event.preventdefault():
实例： 阻止了a标签的默认刷新

（3）.capture // 添加事件监听器时使用事件捕获模式，即在捕获模式下触发
实例：在点击最里层的点击6时，gett方法先执行，因为gett方法在捕获模式执行的，先与冒泡事件。下列执行顺序 geet->set->tz ,因为后俩个还是冒泡模式下触发的事件。

（4）.self //当前元素自身时触发处理函数时才会触发函数，原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数
实例：如果点击内部点击2，冒泡不会执行gett方法，因为event.target指的是内部点击2的dom元素，不是外部点击1的，所以不会触发自己的点击事件

（5）.once //只触发一次

wang_xiaojie
关注
14.Vue的事件修饰符
爱米酱的博客
04-15 827
今天这一节，我们来讲讲Vue中的事件修饰符。下面我们用一个小例子来引入它。 1.Vue事件修饰符小例子 我们都知道一个a标签既有跳转链接，又有点击事件的时候，它会先执行点击事件，然后再跳转链接。就像下面这样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
聊聊vue中的修饰符，常用事件修饰符【总结】
m0_60150712的博客
08-02 380
本篇文章会带大家聊一聊vue指令中的修饰符，对比vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
134Vue-事件修饰符阻止冒泡、阻止默认行为、按键修饰符、capture启用捕获顺序从外到里
Gy_9543的博客
08-05 311
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{num}}</div> <div v-on:click='handle0'> .
Vue 事件修饰符(stop、prevent、self、capture、once、passive)
weixin_42192113的博客
08-03 746
一、Vue 2,0+源码中各个修复的代码 onst genGuard = condition => `if(${condition})return null;` const modifierCode: { [key: string]: string } = { stop: '$event.stopPropagation();', prevent: '$event.preventDefault();', self: genGuard(`$event.target !== $event.cu
阻止事件冒泡和事件捕获的方法及vue事件修饰符的使用
最新发布
SSophia的博客
08-15 1344
通过使用event.stopPropagation()方法，可以阻止事件传播（事件冒泡和事件捕获），通过event.preventDefault()方法，可以阻止事件的默认行为。
vue事件修饰符（阻止事件冒泡、阻止默认事件....）
weixin_43623808的博客
12-05 4409
这应该是vue提供给程序员的语法糖确实很好用。官方说法是： 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。（双手双脚赞同） 这也能让函数看着更干净，爽就完了！ .stop（阻止事件冒泡） .pre...
第六天
qq_42151188的博客
03-12 157
之前遇到一个问题就是在使用vue中的router的时候在浏览器手动输入跳转页面会吧#号变成 23%，对于这样的问题我直接用localhost运行就没问题，我用的是vscode ，用这个就不会了。 名称案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
stopProppagation、preventDefault、return false的区别
weixin_33725807的博客
05-02 267
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素； ...
vue事件修饰符和按键修饰符用法总结
12-03
本文将深入探讨Vue中的事件修饰符和按键修饰符。 首先，让我们来看看事件修饰符。事件修饰符是以点`.`开头的指令后缀，用于在事件处理函数中添加额外的行为。以下是一些常见的事件修饰符： 1. `.prevent`：这个...
Vue中事件修饰符与键盘事件
weixin_60719453的博客
12-04 3045
Vue中的事件修饰符：1、prevent:阻止默认事件；2、stop:阻止事件冒泡；3、once：事件只触发一次；4、capture：使用事件的捕获模式；5、self：只有event.target是当前操作的元素时才触发事件；（只有和当前事件触发的标签一致时才会触发）6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕点完之后不会发生默认事件 点完超链接不会发生跳转，因为prevent阻止了a标签的默认事件（跳转）div和button都有show事件，当点击按钮时，button会触发sh
Vue事件修饰符
wyhcyzai99的博客
08-18 105
Vue事件修饰符 .stop：阻止冒泡 .capture：捕获出发事件 .prevent：阻止事件默认行为 capture：实现捕获触发事件的机制 once：事件只触发一次 //使用.self 实现只有点击当前元素，才会触发事件处理函数,阻止当前元素 <div class = "inner" @click.once = "divHandler"> <input type="button" value="戳他" @click = "btnHanlder"></input&g
vue 阻止事件冒泡，捕获方法
热门推荐
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
09-23 1万+
要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法 1. js 事件的三阶段 捕获阶段 目标阶段:执行当前对象的事件处理程序 冒泡阶段 2. js 阻止事件冒泡，捕获 阻止事件冒泡： event.stopPropagation() 或 event.cancelBubble = true (IE) 阻止浏览器默认行为： event.preve...
Vue基础3之事件处理
qq_34306228的博客
11-08 3940
事件的基本使用：Vue中的事件修饰符： a标签的页面不会跳转 showTip事件不会触发 不使用self时候，点击按钮，会发生冒泡，打印两次，但是event.target还是button事件，所以两次输出的当前操作的元素都是button事件 使用self时候，点击按钮，但是由于外层的div当前操作元素是button不是div，所以外层即便冒泡也不会打印输出 鼠标滚轮滚动，即便滚动到最底部，也能依旧触发该事件，但是如果是页面滚动条事件的话，到底部之后就再不会触发该事件了。 正常运行
vue事件修饰符
qq_45378970的博客
09-21 159
事件修饰符 我们都知道,在操作dom事件时,难免会遇到一些事件的默认行为,例如事件冒泡,事件捕获 a标签有默认的超链接跳转行为 .因此大家很懊恼,下面来例如vue中阻止事件默认行为的事件修饰符 stop 相当于JavaScript中e.stopPropagation() 阻止事件冒泡(不会向上层延伸) capture 事件捕获(由外向内) 与冒泡相反 once 只渲染一次 prevent 相当于e.preventDefault() 阻止默认行为 相当于a标签的return fals
vue的事件处理，$set的用法和表单元素处理修饰符
weixin_58139900的博客
12-22 1546
目录 事件处理 事件注册 事件传参 event 阻止事件冒泡 阻止默认事件 捕获事件.capture 事件修饰符 按键修饰符 $set用法 set操作数组 $set操作对象 $set操作数组对象 表单元素处理 表单修饰符 事件处理 事件注册 事件注册: 语法: v-on:事件名称 = "事件函数/表达式" 简写 @事件名称 = ...
Vue 事件处理 -- 事件修饰符（prevent、stop、capture、self、once）
libingjiedd的博客
04-05 1643
5.self：只有event.target是当前操作的元素时才触发事件；如果不使用Vue指令，那么怎么阻止事件冒泡呢？1.prevent：阻止默认事件（常用）；4.capture：使用事件的捕获模式；//阻止 vue 在启动时生成生产提示。3.once：事件只触发一次（常用）；-- 阻止默认事件（常用） -->2.stop：阻止事件冒泡（常用）；-- 引入Vue -->-- 准备好一个容器–>如果不加指令会怎么样？
vue结合preventDefault()和页面滚动高度计算，解决ios橡皮筋效果
weixin_34364071的博客
12-19 919
感谢<https://www.cnblogs.com/cuncunjun/p/7493782.html>的启发，方法很有用！ 好几个月以前，我写了一个类似于自动回复那种的客服页面，嵌入到公司开发的app里。上周测试突然找到我，说 页面在滑动的时候，输入框也会跟着上下滑动，而这个问题只在ios系统上出现，Andr...
vue中事件修饰符passive
05-12
在Vue中，事件修饰符passive用于优化移动端的滑动性能。当给一个滚动元素绑定滚动事件时，会触发浏览器的默认滚动行为，而在处理滚动事件时，Vue会阻止浏览器默认的滚动行为，然后再去执行自己的滚动处理逻辑。这种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值