uniapp中使用.stop报错 无法使用stopPropagation？

已于 2024-04-13 20:58:39 修改
阅读量2k 收藏 1
点赞数 1
文章标签： uni-app javascript vue.js
于 2024-04-13 20:57:56 首次发布
原文链接：https://blog.csdn.net/zhangjiayu88/article/details/129913705
版权

在开发中我们常常会遇到要阻止事件冒泡的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function

 

 这是因为当事件添加到Vue组件上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。

解决问题：@click.native.stop

  总结：

1.native修饰符可以让父组件接收到原生事件, 否则只能接收自定义事件(通过子组件$emit触发)；

2. native修饰符只能用在组件上, 不能用在原生标签上

 
 
 
 
 

引用地址：https://blog.csdn.net/zhangjiayu88/article/details/129913705

uniapp - 解决报错Error in von handler:“ TypeError: $event.stopPropagation is not a function“，阻止点击事件冒泡导致错
高级前端工程师
07-15 3101
uni-app，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，报错，冒泡，点击穿透，阻止点击事件冒泡，[Vue warnl: Error in von handler:" TypeError: $event.stopPropagation is not a function"，阻止失败，无法解决这个问题，外侧套一层还是报错，依旧出错，详细解决方案，如何解决这个问题，@click.stop，点击组件时不向下传递点击事件，只触发自身的点击事件，
uniapp 如何使用echarts 以及解决tooltip自定义不生效；dataZoom报错问题
GongWei_的博客
01-12 3956
uniapp如何使用echarts并且如何自定义tooltip，以及echarts层级太高怎么办
JavaScript中使用stopPropagation函数停止事件传播例子
10-25
主要介绍了JavaScript中使用stopPropagation函数停止事件传播例子,即阻止事件冒泡的一个方法,需要的朋友可以参考下
前端 event.stopPropagation()失效
m0_51194808的博客
02-10 176
注意，这里要用的是evt.currentTarget，而不是event.target，前者获取的是这里的jqCellDiv，后者可能是jqCellDiv的子dom。把需要禁止向上传递event的对象设置为`position:fixed`，然后通过获取父元素相对于整个屏幕的定位的方式来写。禁止向父dom传递click事件，但是在一些特定情况可能会没有效果，比如某些组件中会先触发父dom的click事件。首先我用的是原生js。
uniapp stopPropagation 无效
MAIMIHO的博客
07-13 4065
官方说明 DCloud_UNI_GSQ 只支持使用修饰符，不支持使用stopPropagation，因为这里的event对象并非浏览器的evnet对象，其本来没有stopPropagation方法，文档中也从未提及支持stopPropagation方法，实现中有stopPropagation方法是为了避免开发者使用引用的第三方代码使用了stopPropagation后报错。 只能在标签上使用 .stop 如果想根据 item 内容不同来判断是否需要 stop, 只能使用 v-if 写两个标签 ..
e.stopPropagation()在uni-app中无效，只能使用stop，所产生的问题
晓枫
02-25 2768
​ 之前做的仪表盘滑动效果 uni-app 微信小程序，因为在苹果手机上滑动时页面会抖动，所以这部分里是阻止了滑动事件的冒泡的，本来页面不足一屏是没有问题可是出了新需求后页面需要上下滚动，就导致了在仪表盘部分上下滑动无法滚动页面，操作很不方便。
uniapp使用阻止时间无效，报错stopPropagation()方法无效
m0_61629497的博客
03-29 615
使用：@click.native.stop。
uniapp点击事件报错 Cannot read property ‘stopPropagation‘ of undefined
令瑞斌
01-23 2102
Cannot read property 'stopPropagation' of undefined
uniapp 使用 scroll-view 报错Unable to preventDefault inside passive event listener due to target being treated as passive.
01-17
当在 UniApp 的项目中使用 `scroll-view` 组件时，可能会遇到如下错误提示： [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive[^1] 此警告通常...
uniapp click.stop不起作用
最新发布
02-21
### UniApp 中 `@click.stop` 修饰符不起作用的原因 在 UniApp 开发环境中，由于框架内部处理机制的不同，某些 Vue.js 的事件修饰符可能不会按照预期工作。具体来说，`.stop` 修饰符用于阻止事件冒泡，但在 UniApp ...
在vue3中安装了vue-router4，编译运行的时候出现17个warning和Object is not a function错误
weixin_46353030的博客
08-25 613
一、环境 1.vscode 2.windows 二、问题 在vue3中安装了vue-router4，编译运行的时候出现17个warning和Object is not a function错误 三、原因 我安装的是vue-router4.0，配置的时候却使用了3.0的语法，所以出现了上述错误，可以选择删除4.0版本，重新安装3.0版本，也可以把涉及vue-router配置的文件语法结构修改成4.0的语法结构。 四、解决方法一 //1.卸载项目中已有的vue-router npm uninstall v
uniapp报错：使用uview 中 u-icon 点击 阻止冒泡 @click.stop 报错
weixin_45650243的博客
05-13 728
Uniapp不支持stopPropagation，event对象并非浏览器的evnet对象，其本来没有stopPropagation方法，文档中也从未提及支持stopPropagation方法。在 uview 组件中使用 u-icon 图标,并添加点击事件，icon 在父元素中阻止冒泡,使用 @click.stop 报错。解决方案就是使用@click.navtive.stop即可！
uniapp+uview @tap.stop=“stop“阻止冒泡失效 bug
zhangcz的博客
05-13 506
我的解决办法，使用：@tap.native.stop。经测试，在微信小程序与h5没问题。
在vue和uni中.stop阻止事件冒泡失败？
HHHHH2187的博客
10-08 1251
这时候我们可以使用.native事件修饰符，在父组件中给子组件绑定一个原生事件，native修饰符用于在自定义组件上监听原生 DOM 事件。通过使用.native修饰符，可以将原生事件绑定到组件的根元素上。这里我是使用uview的组件行里面插了icon但是单独点击icon会发现 同时触发了u-cell-item的事件。但是我发现使用stop并没有直接阻止的事件冒泡。
uniapp 真机调试 click点击事件无效
热门推荐
yangqii的博客
12-10 3万+
问题分析： （网络上普遍答案，但不能确定是否是这个原因导致） 移动端的主要问题是click会有200-300ms的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的300ms之后，才触发click，如果300ms之内还有click，就会进行放大缩小。 解决方法：（尝试该方法，但还是会出现点击事件无效。有可能是网络问题？？？） 使用 tap 替换 click...
uni-app中点击某个指定元素，防止键盘收起
m0_59776540的博客
04-28 1358
uniapp防止键盘收起，仿微信发送消息
重新认识vue之事件阻止冒泡
az44yao的专栏
06-20 2752
冒泡的表现 近期用vue做了一个需求，大概是同一个区域，点击不同位置有不同的响应函数，还有个总的响应函数，好吧，如下图所示: 他们的DOM结构如下: <div v-for="(item, index) in listData" @click="handleClick3"> <el-col :span="grid"> <div @click="handleClick1"></div> </el-col>.
uniapp uk-uview解决 ‍[⁠TypeError⁠]‍ {message: “e.stopPropagation is not a function“}问题
QinYHJ的博客
08-11 473
解决e.stopPropagation is not a function问题，如果在其他地方用于同样的问题可以参考本示例。
uniapp``报错
07-28
在Uniapp中，由于event对象并非浏览器的event对象，所以不支持stopPropagation方法。因此，无法直接使用@click.stop来阻止事件冒泡。\[2\]如果你希望在点击icon时不触发父级的点击事件，可以考虑以下解决方案： 1. 在icon的点击事件处理函数中，手动调用event.stopPropagation()方法来阻止事件冒泡。例如： ``` <template> <view @click="parentClick"> <u-icon @click="iconClick"></u-icon> </view> </template> <script> export default { methods: { parentClick() { console.log('父级点击事件'); }, iconClick(event) { event.stopPropagation(); console.log('icon点击事件'); } } } </script> ``` 2. 如果你希望在点击icon时不仅阻止事件冒泡，还要阻止父级的点击事件，可以在父级的点击事件处理函数中添加一个判断条件，只有当事件的target不是icon时才执行相应的逻辑。例如： ``` <template> <view @click="parentClick"> <u-icon @click="iconClick"></u-icon> </view> </template> <script> export default { methods: { parentClick(event) { if (event.target.tagName !== 'U-ICON') { console.log('父级点击事件'); } }, iconClick() { console.log('icon点击事件'); } } } </script> ``` 通过以上两种方式，你可以在Uniapp中实现在点击icon时不触发父级的点击事件。 #### 引用[.reference_title] - *1* *2* [uniapp 报错之 uview 中 u-icon 点击 阻止冒泡 @click.stop 报错](https://blog.csdn.net/YZRHANYU/article/details/127961460)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值