使用修饰符，可以实现触发子组件click时，不触发父组件的click

已于 2024-04-12 17:46:40 修改
阅读量486 收藏
点赞数 4
文章标签： 前端
于 2024-04-12 17:41:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42193760/article/details/137688961
版权

子组件可以使用修饰符.stop，阻止冒泡

// 点击text时，只会触发doEvent2，不会触发doEvent1
<view @click="doEvent1()">
	<text @click.stop="doEvent2()"></text>
</view>

click修饰符，可以配合使用

vue时间处理

  • .stop 阻止冒泡
  • .prevent 取消默认事件
  • .captrue 捕获事件
  • .once 事件只会触发一次
  • .capture
  • .self
  • .passive
28da
关注
点击子元素事件不触发父元素事件
05-12
点击子元素，触发子元素事件的同时不触发父元素的时间
Vue的自定义组件不能使用click方法的解决
10-15
因此，当你在自定义组件上直接使用`@click`时，Vue会尝试在组件的虚拟DOM上触发该事件，而不会作用于实际的DOM元素。这可能导致事件无法正常工作，尤其是在组件内部需要处理点击事件的情况下。 解决这个问题的方法...
关于click事件的修饰符
weixin_45644355的博客
12-22 774
1. .native 在引入自定义组件的时候，是无法在引入组件的地方使用dom原生方法的，因为这是作用在组件内部的div上，组件本身不具备这些方法，所以要加上.native,写成@click.native才会让原生方法生效 2. .stop - 阻止单击事件冒泡，即阻止子元素的点击事件触发到父元素的点击事件 3. .prevent 取消默认事件 提交事件不再重载页面 4. .capture 添加事件侦听器时使用事件捕获模式，与事件冒泡的方向相反，事件捕获由外到内 5. .self 6.
@click事件内置修饰符
qq_38969618的博客
10-13 283
【代码】@click事件内置修饰符。
在JS（JavaScript）中，常见的点击事件（click）修饰符
weixin_52231116的博客
06-04 1371
本文主要介绍在JS（JavaScript）中，常见的点击事件（click）修饰符。
vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发
weixin_44509776的博客
04-11 5937
在vue项目中，子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？
解决element-ui中下拉菜单子选项click事件不触发的问题
10-18
总之，通过使用.native修饰符，我们可以解决Element-UI中下拉菜单子选项click事件不触发的问题。这是处理Element-UI组件事件时的一个小技巧，但也提醒我们在开发过程中要细心分析问题，根据情况选择正确的事件绑定...
vue .sync修饰符子组件怎么修改父组件
最新发布
09-07
当使用`.sync`修饰符时，子组件可以向父组件传递数据，父组件将接收到的值更新为其自身的属性。这通常用于父子组件之间的双向数据绑定。 具体来说，父组件会传递一个属性给子组件，并在子组件中通过`this.$emit`...
vue3子组件怎么不触发父组件的方法
08-24
假设父组件有一个方法`handleClick`，我们想让子组件中的点击事件不触发该方法，我们可以在子组件的模板中使用`@click.stop`修饰符。示例如下： ```html <button @click.stop="doSomething">子组件按钮 export...
vue中如何让子组件修改父组件数据
12-10
总结起来，Vue中子组件修改父组件数据通常通过监听事件、使用`.sync`修饰符或者创建数据副本的方式来实现。这三种方式各有其适用场景，开发者可以根据实际需求选择合适的方法。记住，避免直接修改父组件的属性，以...
关于@click 的事件修饰符
weixin_45677987的博客
02-25 5119
1: stop: 阻止冒泡事件 阻止冒泡事件既是阻止子元素的点击事件冒泡触发到到父元素身上点击事件。 2: .prevent 取消默认事件 提交页面不在重载页面 3: .captrue // 捕获事件 添加事件监听器使用事件捕获模式, 与事件冒泡相反, 事件捕获由外箱向内。 4: @click.self() 事件 只有event.target 是当前操作的元素时才是触发事件。 5: prevent: 阻止默认事件(常用); 6: stop: 阻止.
Vue中@click的常见修饰符
conquer_galaxy的博客
04-07 3906
Vue中@click的常见修饰符
vue点击子元素不触发父元素的注意事项
2202_75496303的博客
02-05 550
必须是click.stop事件，如果没用给你个空的事件即可。注意不能给鼠标滑动等事件做冒泡处理，没用。虽然是个很简单的问题。
Vue组件点击事件不触发的问题，添加事件修饰符native解决
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
03-04 8182
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
vue中设置子组件的点击事件不影响父组件的点击事件
穆雄雄的博客
10-23 4268
“大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。”今天分享个技术块儿。在做项目的过程中，遇到了个问题，简单的描述一下：有一个card卡片，上面绑定了个点击事件，点击card卡片，就会...
VUE 修饰符
m0_55240753的博客
09-13 904
一、事件修饰符 1、@click.stop和原生js的event.stopPropagation()一样，都是阻止冒泡的，当一个元素有且只有它一个的时候看不出效果，当该元素存在父元素时就能看出来了，如下： // 当有且只有一个元素时 点击打印只会出现一行结果（用原生写的） <div onclick="child"></div> <script> function child(){ console.log("你点击了子元素") } </
Vue：@click.stop -- 阻止事件向祖先元素传递（事件冒泡）
孙悟空
06-30 1万+
最近遇到这么一个问题：有一个父div，包含一个子div。要求点击父div值执行fun()函数，而点击子div时不执行fun()函数。
vue——@click的事件命令以及修饰符
热门推荐
Sunshine0508的博客
05-09 1万+
1、@click.stop 阻止事件冒泡 //只弹出“noclick” <div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> ...
html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...
weixin_42110038的博客
06-15 827
如果子元素和父元素都有点击事件，会出现点击事件冒泡的情况。1.如何避免冒泡：html：你好,战无不胜[注销]js：方法1：UserLogout.onclick=function (e) {e.stopPropagation();//阻止事件冒泡即可//e.cancelBubble=true;//非标准的IE方式:; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了}方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值