vue 事件修饰符 stop、stop.self、self.stop

最新推荐文章于 2024-07-24 11:18:57 发布
最新推荐文章于 2024-07-24 11:18:57 发布
阅读量512 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42684926/article/details/119490042
版权
本文详细解析了Vue中@click.stop、@click.self.stop和@click.self的区别。@click.stop防止事件冒泡，自身点击事件仍执行；@click.self.stop阻止自身点击事件并停止事件流；@click.self仅阻止自身点击，事件流继续。了解这些修饰符能帮助开发者更精确地控制Vue应用中的事件处理。
摘要由CSDN通过智能技术生成

@click.stop 阻止事件流继续传播，自身的点击事件仍然执行。
@click.stop.self 自身的点击阻止，也阻止了事件流继续传播。
@click.self.stop 只阻止自身的点击事件，事件流继续传播。

混搭数理化
关注
专栏目录
vue 事件修饰符（stop、 .capture 、.self、.prevent、.once）
weixin_40624809的博客
12-30 417
stop：阻止冒泡事件。即：放在谁上，就从谁开始不冒泡（放在被点击的元素身上，自身的点击事件会触发）。 capture：捕获触发机制。即：无论点击谁，先触发带有capture的。 self：自身不参与冒泡事件。即：冒泡事件照常进行，带有self的不参与。 prevent：阻止默认事件。 once：只触发一次事件。即：阻止默认事件，就阻止一次、div的click事件就只执行一次。 <!DOCTYPE html> <html> <head> <meta ch.
Vue · v-on和事件修饰符（.stop .prevent .capture .self .once）
chez-moi
03-12 1550
一、事件修饰符 .stop 阻止冒泡 .prevent 组织默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 .once 事件只触发一次 二、事件修饰符的使用 （1）.stop 在没使用.stop时，默认是冒泡机制 .stop阻止所有冒泡行为 【代码实现-无.stop】 <!DOCTY...
vue中的时间修饰符stop,self
weixin_30593261的博客
05-14 166
stop阻止自身以外的冒泡 self只会阻止自身冒泡 转载于:https://www.cnblogs.com/andyZhang0511/p/10865383.html
Vue中 @click.stop/.self/.prevent 的绑定监听
weixin_44684357的博客
06-28 649
@click.stop 阻止事件冒泡 @click.self 阻止自己的冒泡行为，不能阻止人家的冒泡行为 @click.prevent 阻止事件的默认行为 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
vue @click.native和@click.stop和@click.self
热门推荐
前端技术的学习整理
05-10 11万+
参考一： vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用.native修饰符） 2，等同于在自组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn) 参考二： 在事件处理器中经常需要调用event.preventDefault()...
Vue 事件处理 -- 事件修饰符（prevent、stop、capture、self、once）
libingjiedd的博客
04-05 1752
5.self：只有event.target是当前操作的元素时才触发事件；如果不使用Vue指令，那么怎么阻止事件冒泡呢？1.prevent：阻止默认事件（常用）；4.capture：使用事件的捕获模式；//阻止 vue 在启动时生成生产提示。3.once：事件只触发一次（常用）；-- 阻止默认事件（常用） -->2.stop：阻止事件冒泡（常用）；-- 引入Vue -->-- 准备好一个容器–>如果不加指令会怎么样？
事件修饰符 .self 和 .stop 的区别
最爱喝怡宝的博客
11-10 2662
在vue中 .self 和 .stop 的功能有些相同，都可以阻止冒泡，但他们其实也是由区别的 .stop 是阻止事件向外继续冒泡，当你给了子级.stop后他的父级就不会冒泡 .self 是我只让自己不冒泡，其他人我不管 <div id="app"> <!-- .stop 是阻止事件向外继续冒泡，当你给了子级.stop后他的父级就不会冒泡 --> <!-- .self 是我只阻止自己的冒泡事件，其他人我不管 --> ..
vue事件修饰符和按键修饰符用法总结
12-03
本文将深入探讨Vue中的事件修饰符和按键修饰符。 首先，让我们来看看事件修饰符。事件修饰符是以点`.`开头的指令后缀，用于在事件处理函数中添加额外的行为。以下是一些常见的事件修饰符： 1. `.prevent`：这个...
Vue指令之v-on的缩写和事件修饰符||.stop 和 .self 的区别
qq_39368007的博客
03-10 698
事件修饰符： .stop 阻止冒泡 注：不阻止冒泡的话：先冒里面的那个元素，再冒外面的元素 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 注：捕获时间：先冒外面的元素，再冒里面的那个元素 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 .once 事件只触发一次 .stop 和...
vue 之事件修饰符 阻止事件冒泡 .stop .prevent .capture .self .once
夜阑珊妖妖
11-21 982
弹层，点击空白处隐藏； <div class="tanceng" @click="blank"> <div class="main" @click.stop> <!-- ... --> <p class="btn" @click="btn">提交</p> </div> </div> 问题：点main ...
Vue事件修饰符stop,self,capture的阻塞冒泡的详细说明
lal95828的博客
03-27 779
学过js的大概都应该知道，阻塞，冒泡之间的关系和区别。通常情况下，事件触发机制的顺序是：捕获阶段 ===》目标阶段 ===》冒泡阶段。通俗的说，就是在嵌套标签元素的时候，每个标签元素都有点击事件，那么点击子标签的时候，父子孙爷上的点击事件的触发顺序。 先把实验代码放上去 <!DOCTYPE html> <html> <head> <meta cha...
插值表达式和指令 .self 和 .stop的区别 以及.capture
四月
08-06 728
一：插值表达式{{xxx}}： 在模板中输出变量，在插值表达式中是可以写javascriptbiao表达式的， 例如{{1+2}},但是不可以写语句。 <!-- 插值表达式 --> <h2>插值表达式</h2> <div> <div>{{message}}</div> <div>{{message+'信息'}}</...
stopSelf()方法的详解
world_kun的博客
03-04 2917
使用Service的stopSelf()方法来停止服务，要注意这是一个父类的方法，调用了这个方法之后，服务停止的时间不 确定，后面的代码还是会执行，并且onDestroy()方法也会执行，下次重新启动服务的时候，先调用onCreate(),然后再调用onStart()方法。 就像你使用io流一样，用完后要colse掉，这个函数和 stopService(Intent) 功能一样，停止服
Vue 常用事件修饰符（prevent、stop、capture、self、once）」2024年7月23日
最新发布
weixin_43543590的博客
07-24 389
Vue 常用事件修饰符（prevent、stop、capture、self、once）
vue之事件修饰符（ .stop、.prevent、 .capture 、.self）以及.stop与.self的区别
咖啡味的小认真
08-27 7777
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <scrip...
Vue 事件修饰符.self的用法
heartOfblack 离开了电脑，我不希望我还有病
10-26 8680
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:s
Vue事件传递问题（stop、self、once）
大道至简
09-26 651
once prevent stop capture self passive
vue学习笔记7-事件修饰符
清砾的博客
10-27 364
vue中事件修饰符有6个 ：.stop .prevent .capture .self .once .passive 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。 修饰符是由点开头的指令后缀来表示的。 .stop 阻止冒泡事件 .preve
vue click修饰词示例 @click.stop @click.prevent @click.self
qq_41686921的博客
04-19 893
vue官方文档中对click修饰词的描述比较抽象 简单写了几个例子 @click.stop Dom子节点往根节点传播叫做冒泡 stop不让冒泡再进行下去 <div @click="click1()" > <a @click.stop="click2()"></a> </div> export default { name: "Home",...
vue 按键修饰符 .native .prevent .stop .self
09-08
在Vue中，按键修饰符是用于监听键盘事件的一种方式，可以通过在事件监听器后面使用点符号(.)和修饰符来指定特定的条件。 1. .native修饰符： 当我们使用某个组件的根元素时，通常希望直接监听原生的DOM事件，而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值