uni-app nvue 阻止事件冒泡 .stop 修饰符不生效的解决方案

最新推荐文章于 2024-04-13 20:57:56 发布
最新推荐文章于 2024-04-13 20:57:56 发布
阅读量7.1k 收藏 4
点赞数 2
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HRM2454/article/details/107205504
版权

如下图，在事件绑定是使用了.stop事件修饰符，在H5，小程序，普通app项目中起作用，但在nvue项目中无效 

 

解决方案：在事件中添加条件编译即可

// #ifdef APP-NVUE
e.stopPropagation()
// #endif

作为一个uniapp开发者，我差点因为事件修饰符不生效的“bug”崩溃，后来发现竟然是平台不支持！
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-09 70
这也提醒了我，在开发过程中，遇到类似的问题时，首先要检查平台的支持情况，而不是一味地怀疑代码或框架本身。抱着试试看的心态，我切换到H5端进行调试，结果这两者的修饰符在H5端都正常工作了，事件的冒泡和默认行为都如预期被处理了。最近在开发一个uniapp项目时，我遇到了一个让人蛋疼的问题——某些事件修饰符在小程序端似乎不起作用，甚至让我怀疑是不是遇到了bug。最后，遇到问题时，先查文档，别急着怀疑“bug”，这是我给自己的经验教训，也是以后开发中需要时刻提醒自己的心态。等修饰符，仅在H5平台有效。
uni-app——如何阻止事件冒泡
TianXuab的博客
10-27 1万+
在开始讨论如何阻止事件冒泡之前，让我们先了解一下什么是事件冒泡。事件冒泡是指当一个元素上的事件被触发时，它会向上级元素传播，直到到达文档根节点。这意味着如果我们不采取任何措施，事件将会被多个元素捕获和处理。
uniapp中 .stop修饰符无效
weixin_47460845的博客
04-11 547
给外层套一个view标签 解决。
uniapp nvue页面的阻止冒泡事件
zongxingfengyun的博客
11-17 650
uniapp nvue 阻止冒泡事件
uniapp nvue&vue阻止事件冒泡
weixin_45881304的博客
03-04 350
【代码】uniapp nvue&vue阻止事件冒泡。
e.stopPropagation()在uni-app中无效，只能使用stop，所产生的问题
晓枫
02-25 2763
​ 之前做的仪表盘滑动效果 uni-app 微信小程序，因为在苹果手机上滑动时页面会抖动，所以这部分里是阻止了滑动事件的冒泡的，本来页面不足一屏是没有问题可是出了新需求后页面需要上下滚动，就导致了在仪表盘部分上下滑动无法滚动页面，操作很不方便。
一个因@click.stop引发的bug的解决
10-17
开发者在项目中的菜单栏组件中使用了`<div class="main" @click.stop="isShowWhole = false">`，这里的`@click.stop`修饰符阻止了事件冒泡，可能导致Popover外部点击的事件判断无法正常触发。移除`stop`修饰符后，...
vue3 uni-popup 使用遮罩层没了
最新发布
04-03
-- 移除.stop.prevent修饰符 --> ``` 4. **使用官方推荐初始化方式** 通过`ref`直接获取组件实例： ```html <uni-popup ref="popupRef"></uni-popup> ``` ```javascript const popupRef = ref(null) // ...
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 941
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
Vue基础Day_01学习+Vue项目创建报错(true` in `“vueCompilerOptions“` property)解决方案
qq_43372180的博客
05-22 5055
Vue学习Day_01.md文档
uniapp阻止事件冒泡@click.stop失效
weixin_38304202的博客
01-07 1万+
配合.native使用：@click.native.stop
解决uniapp中nvue事件冒泡的问题(stop失效问题)
xsaid的博客
08-04 1296
通过event对象的给子元素加个e.stopPropagation()就可以解决事件冒泡！内层为图片预览点击事件，外层为跳转，
在vue和uni中.stop阻止事件冒泡失败？
HHHHH2187的博客
10-08 1248
这时候我们可以使用.native事件修饰符，在父组件中给子组件绑定一个原生事件，native修饰符用于在自定义组件上监听原生 DOM 事件。通过使用.native修饰符，可以将原生事件绑定到组件的根元素上。这里我是使用uview的组件行里面插了icon但是单独点击icon会发现 同时触发了u-cell-item的事件。但是我发现使用stop并没有直接阻止的事件冒泡。
nvue文件中@click.stop失效
qq_49552046的博客
09-14 784
在uniapp开发中nvue文件是跟vue文件是不一样的，就比如@click.stop阻止点击事件继续传播就失效了，这时我们需要在子元素事件中添加条件编译，这样就会解决这个问题。在nvue文件中在子元素使用@click.stop失效，父元素的事件触发了。
uniapp的冒泡事件使用@click.stop没有效果
weixin_42947972的博客
08-19 1274
我们加多一个参数native即可。
uniapp-uni-icons组件@click.stop失败解决~
Yjx的博客
12-20 1306
不能用在uniapp组件uni-icons上，我们在外层包裹一层view标签，将点击事件放在view标签上即可，希望这个小技巧能帮助到您~
uniapp中使用.stop报错 无法使用stopPropagation？
g1437353759的博客
04-13 1986
在开发中我们常常会遇到要的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function这是因为当事件添加到上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。
uniapp开发微信小程序阻止事件冒泡
weixin_45424548的博客
11-29 1785
使用uniapp开发小程序的时候，@click.stop来做事件冒泡没有作用。 查看官方给出的文档是这样写应该就可以了，但是就是没起作用，点击子组件的时候还是触发了父组件的事件。 <u-field disabled=true maxlength='9' @tap.stop="keyboard('money')" label-width='0' v-model="from.money" :placeholder="lang.InputMoney" :clearable='false'
uniapp 真机调试 click点击事件无效
热门推荐
yangqii的博客
12-10 3万+
问题分析： （网络上普遍答案，但不能确定是否是这个原因导致） 移动端的主要问题是click会有200-300ms的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的300ms之后，才触发click，如果300ms之内还有click，就会进行放大缩小。 解决方法：（尝试该方法，但还是会出现点击事件无效。有可能是网络问题？？？） 使用 tap 替换 click...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值