在v-for循环里面绑定事件阻止冒泡不生效怎么办？

于 2024-01-17 17:53:02 发布
阅读量514 收藏 10
点赞数 6
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43532275/article/details/135656565
版权

遇到一个场景，点如下小点显示点赞评论的弹窗，点击其他空白报复关闭弹窗，我这边做的处理是在这条数据的最外边加一个事件关闭弹窗，然后用阻止冒泡实现点击两个点是控制弹窗，点击最外边部分时关闭弹窗。由于我这边的数据是用v-for循环渲染出来的，导致阻止冒泡没生效，如果你想要阻止事件冒泡，需要确保绑定事件的元素是直接被点击的元素，而不是包裹它的父元素。

在v-for遍历出来的数据

 非v-for循环阻止冒泡，用以下写法就会成功

 

如果实在v-for里面，无法直接通过 @click.stop 来阻止事件冒泡。

解决这个问题的一种方法是使用一个方法来处理点击事件，并在方法中手动调用 event.stopPropagation()。

代码如下：

 js部分，加上event.stopPropagation即可成功

 

圆周率呀
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效
04-01 716
原因问题的原因出现在，jquery确实在界面HTML生成之后执行了，但是当时向后台请求的数据还没请求回来，当请求回来用for循环重新渲染数据后，jquery已经执行完了，所以说新数据渲染的标签并没有jquery的方法。解决办法使用vue不适合jquery来渲染数据，如果非得用jquery渲染的话，比较好的办法就是使用一个侦听器（watch）来监听数据的变化，当请求回数据来的时候在使用jquery渲染。
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-for渲染DOM的时候添加新元素的时候，绑定事件也能对新增的元素有效。 而这次遇到的问题则是，原本绑定事件中（该函数没有写在vue实例的methods中），导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。 此时需要通过用VUE提供了事件修饰符来处理，比如阻止事件冒泡@click.stop=’xx()’ .stop .prevent .capture .self .once <a></a> <!
el-row的@click.stop并没有阻止事件冒泡，还是会触发外层div的点击事件
changyana的博客
08-19 935
当点击一个元素时，会进行冒泡，一直触发到父元素。可以通过给click加stop来阻止事件冒泡，如：@click.stop=“search_maf_version(version)”，但是发现给el-row加上@click.stop并没有生效，还是会触发外部的点击事件。在使用 Vue.js 框架的 Element UI 库中，对于一些组件，如 el-row ，可能不能直接通过在其上添加 @click 来绑定原生的 click 事件，因为这些组件可能没有实现 click 事件的派发。
vue阻止事件冒泡
qq_43483403的博客
11-18 206
阻止事件冒泡，添加`.stop`修饰符不起效果
VUE的阻止冒泡事件
-拜托小羊
05-30 1458
vue中的阻止冒泡事件可以帮助我们实现当子盒子被点击时，父盒子不被触发对应的点击事件。
VUE在v-for里阻止冒泡事件失效问题
lai18520179783的博客
01-20 2331
a标签里的button点击事件阻止冒泡失效，导致点击button会打开a标签的链接。 解决方法： VUE事件修饰符，使用v-on:click.stop.prevent="dosomething()" ... ...
vue 使用鼠标移入移出事件发生冒泡事件阻止冒泡不生效的解决方法
wh20141212的博客
04-23 5794
今天是非常忙碌又很坑的一天啦 又踩了一个坑 按需求写了一个鼠标移入出现价格 详情的盒子 鼠标移出消失的方法 使用mouseout和mouseover 但是这时候就发生了冒泡事件 父级元素绑定定mouseout和mouseover，移过父元素和子元素是都会触发！！！！！ 尝试了@mouseout.stop.prevent=“addClassload(index)” 等阻止冒泡事件都不行 最后查资...
uniapp的冒泡事件使用@click.stop没有效果
weixin_42947972的博客
08-19 895
我们加多一个参数native即可。
uniapp阻止事件冒泡@click.stop失效
热门推荐
weixin_38304202的博客
01-07 1万+
配合.native使用：@click.native.stop
关于vue v-for循环解决img标签的src动态绑定问题
10-18
今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue事件对象、冒泡、阻止默认行为
08-31
本篇文章主要介绍了详解vue事件对象、冒泡、阻止默认行为，这里整理了详细的代码,有需要的小伙伴可以参考下。
vue中v-for通过动态绑定class实现触发效果
10-17
主要介绍了vue中v-for通过动态绑定class实现触发效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
本篇文章将详细讲解如何利用`v-for`循环列表来控制按钮的隐藏与显示，以及如何处理列表内的事件绑定，确保事件只对当前列表元素生效。 首先，`v-for`的语法通常是`v-for="item in items"`，其中`items`是源数据数组...
阻止冒泡无效问题
weixin_45162984的博客
12-07 1423
经常遇到用js渲染的div，绑定事件需要用到事件委托，此时阻止冒泡不能使用在时间委托中实现，比如 // 这种方法无效，阻止不了冒泡 $(document).on('click','#id',function(event) { event = event || window.event; event.stopPropagation(); }) 正确的写法是 // 这是正确写法 $(document).on('click',function() { $('#id').on('click',functio
在vue和uni中.stop阻止事件冒泡失败？
最新发布
HHHHH2187的博客
10-08 866
这时候我们可以使用.native事件修饰符，在父组件中给子组件绑定一个原生事件，native修饰符用于在自定义组件上监听原生 DOM 事件。通过使用.native修饰符，可以将原生事件绑定到组件的根元素上。这里我是使用uview的组件行里面插了icon但是单独点击icon会发现 同时触发了u-cell-item的事件。但是我发现使用stop并没有直接阻止的事件冒泡。
vue实现拖拽移动盒子以及修饰符stop阻止冒泡失败踩坑
weixin_46977007的博客
11-19 2067
vue实现拖拽移动盒子以及修饰符stop阻止冒泡失败踩坑 今天下午有个需求，有两个盒子，一个父盒子，一个子盒子，子盒子绑定了一个点击事件，拖动父盒子能够拽动父盒子，代码如下： <template> <div id="app"> {{ positionX }} {{ positionY }} <div @mousedown="move" class="out" > <div class="in" @click="clickIn"
element中vue .stop阻止事件冒泡失效的解决方法
globalvariableA的博客
04-22 3506
解决思路就是在外层套一个div，使用div的@click.stop方法
vue阻止冒泡
Sunshinedada的博客
11-16 3398
vue阻止冒泡 在事件后面加上.stop <el-button type="primary" size="small" @click.stop="editgGift()">编辑</el-button >
ios v-for循环生成的第一项点击事件不生效
06-01
.v-for-item:first-child { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } ``` 如果这样仍然无效，你可以尝试使用 `@click.native` 代替 `@click` 事件来绑定点击事件，例如： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圆周率呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值