uniapp - 解决报错Error in von handler:“ TypeError: $event.stopPropagation is not a function“，阻止点击事件冒泡导致错

于 2024-07-15 23:16:28 发布
阅读量69 收藏 3
点赞数 6
分类专栏： 前端常见问题解决 文章标签： uni-app 点击事件click 阻止点击事件出现冒泡问题 点击click后阻止事件传递 event.stopPropa uniapp报错详细解决教程 外面套一层click.stop
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/140451589
版权
前端常见问题解决 专栏收录该内容
102 篇文章 105 订阅 ¥9.90 ¥99.00
订阅专栏

报错截图

在uni-app 微信小程序/手机h5网页网站/安卓app/苹果app/支付宝小程序/nvue等（全平台完美兼容）开发中，使用 @click.stop 想要阻止点击事件冒泡时，浏览器控制台出现报错：[Vue warnl: Error in von handler:" TypeError: $event.stopPropagation is not a function"，就是想让click点击事件不要传递只在当前生效，一般都是用@click.stop方法，但却收到报错，并且外面套一层view容器依旧报错，非常恶心。

其他教程都无法解决，在本文你只要报类似的错误就可以100%完美解决。

在这里插入图片描述

解决教程

如下所示，首先

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
next-test-api-route-handler：在孤立的类似Next.js的环境中自信地对Next.js API路由处理程序进行单元测试
02-11
next-test-api-route-handler （NTARH）使用Next.js的内部API解析器精确模拟API路由处理。 为了保证稳定性，将针对自动测试此软件包。 继续自信地测试！ :sparkles: :sparkles: 寻找此软件包的版本与Next.js的早期...
react-keyboard-event-handler:一个用于处理键盘事件的React组件
05-11
React键盘事件处理程序一个用于处理键盘事件（keyup，keydown和keypress * ）的React...现场演示安装npm install react-keyboard-event-handler用法处理全局关键事件默认情况下， KeyboardEventHandler仅处理源自docu
[Vue warn]: Error in v-on handler: “TypeError: $event.stopPropagation is not a function“
前端泡面人
07-05 721
【报错】v-on handler: &quot；TypeError: $event.stopPropagation is not a function
Effotzjw_小白慢慢踏全栈
02-21 2378
在vue中，对input框直接使用@click去触发事件，是无法达到想要的效果，也无法触发事件，需要加上native才能实现input框的点击事件触发，即@click.native=“XXX”在input上写了@click，想阻止冒泡，但是一直报不存在的问题。
Error in v-on handler: “TypeError: this.$refs.formatData.validate is not a function“
m0_58565372的博客
04-28 1131
我把form的表单校验写到了一个tab切换里面了，这个时候在获取表单的方法会得到一个数组而不是对象，直接写成以下代码会报错。则写成this.$refs['formatData'][this.index].validate((valid)，注：如果console.log(this.$refs['formatData'])打印出来的是一个数组，如。如果console.log(this.$refs['formatData'])打印出来的是一个对象，如。因为我的tab有五个，所以打印出来有五个值。
Error in v-on handler: “TypeError: this.$refs.popup.isShow is not a function“
weixin_47024018的博客
10-26 3892
调用show()的aip方法报错！ 报错的信息截图如下： 通过打印console.log(this.$refs.popup)，查看到这个popup是一个数组 报错前的代码 原来的代码时是这样 this.$refs.popup.show() 修改后的代码 后面改成了 ‘this.$refs.popup[0].show()’，获取数组的第一个解决了该问题 ...
Error in v-on handler: “TypeError: this.$refs.cateForm.validate is not a function
ling08140814的博客
03-08 6043
问题描述： 多个Tab页切换时，不同的form表单都需要校验，当校验时，报错了。 问题解决： 检查是否有书写错误，比如 ref=“form” 和 this.$refs.form 一定要对应。 如果书写无误，console.log(this.$refs.form)，到控制台查看其输出结果。 若输出结果如该图所示，则校验时应选择(this.$refs.form)[0].validate。 若输出结果如该图所示，则校验时应选择this.$refs.form.validate。 ...
strong-error-handler:用于开发（调试）和生产环境的错误处理程序
08-04
对于 4xx 错误，输出包含完整的错误消息 ( error.message ) 和ValidationError通常用于提供有关验证问题的机器可读详细信息的details属性 ( error.details ) 的内容。 它还包括error.code以允许传递机器可读的错误...
yii2-custom-errorhandler:Yii 2.x应用程序中的自定义错误处理
05-07
因此，应及时阻止用户和/或通知管理员有关黑客入侵应用程序的尝试。 使用该模块的最简单方法是，在接收到ForbiddenHttpException时检查用户是否登录，否则，将其发送到授权页面。 ＃＃＃ 安装： ＃＃＃ $ ...
node-clipboard-event:NodeelectronNW.js的剪贴板更改事件
05-24
节点剪贴板事件 Node.js / Electron.js / NW.js的剪贴板更改事件 笔记： 没有被轮询 用法 const clipboardListener = require('clipboard-event'); // To start listening clipboardListener.startListening(); ...
在uniapp中如何使用地图
最新发布
weixin_55800388的博客
07-12 333
最好是使用webview + html形式加载，避免打包app时的地图加载问题。对应的html一定需要注意目录结构。//从其他组件传来的值。
uniapp中使用uni-ui组件库
weixin_42289273的博客
07-11 324
【代码】uniapp中使用uni-ui组件库。
uni-app 扫描二维码获取信息功能
qq_42371932的博客
07-12 332
然后现在是可以扫描二维码的状态，扫描之后，可以看到首先是出发上一个页面的事件，然后返回上一页面。这样就可以扫描二维码之后，传递数据给上一页面。首先是扫描二维码的功能，可以参考这篇博文。接下来需要在扫描界面的上一页面做处理。最后设置事件中获取数据的方法。在mounted里挂载事件。需要在data里设置。
uniapp mac m1 arm芯片编译问题
z157794218的专栏
07-10 1148
遇到Macarm芯片（m1 m2）的uniapp异常
UNIAPP 使用地图 百度 高德 腾讯地图路线轨迹
qq_45499633的博客
07-10 282
【代码】UNIAPP 使用地图 百度 高德 腾讯地图路线轨迹。
【UNI-APP】阿里NLS一句话听写typescript模块
applebomb的专栏
07-10 450
阿里提供的demo代码都是javascript，自己捏个轮子。参考着自己写了一个阿里巴巴一句话听写Nls的typescript模块。VUE3的组合式API形式
uniapp微信小程序授权登录实现
m0_73035846的博客
07-12 330
我们小封装一个获取code 的方法 在页面中可以直接调用 封装在 js 中。我们在做小程序的时候用的最多的方式登录 就是原生的授权登录的功能。这个方法 也不是很难 首先我们要获取我们在小程序中的code值。把登录的要封装在一个单独的文件中，这样修改的时候，也方便修改。
uniapp踩坑小伎俩记录
Black____White的博客
07-11 527
1. 页面路径和文件名大小写问题2. 小程序平台差异3.uniapp跨页面传值2. 全局对象传值 （ 可以使用全局对象getApp()或全局变量。});// 接受页onLoad() {// 输出: { id: 123, name: ‘Alice’ }3. 本地存储传值 （ 适用于需要跨页面、甚至跨应用会话的数据传递。3. bus传值。
uniapp颜色选择器
生而为人我很抱歉
07-11 402
https://github.com/mehaotian/t-color-picker/ 添加点击事件后的代码如下： <template> <view v-show="show" class="t-wrapper" @touchmove.stop.prevent="moveHandle"> <view class="t-mask" :class="{active:active}" @click.stop="close"></view> <vie
Error in v-on handler: "TypeError: this.$refs.table.toggleAllSelection is not a function"
07-12
这个错误通常出现在 Vue.js 的 v-on 事件处理程序中，表示调用了一个未定义的函数。具体到你提供的错误信息中，它指出 `this.$refs.table.toggleAllSelection` 不是一个函数。 出现这个错误的原因可能是以下几种情况之一： 1. `table` 对象没有正确地被引用或定义。请确保在模板中正确地引用了 `table` 对象，并且它已经被正确地定义和初始化。 2. `toggleAllSelection` 方法没有被正确地定义。请确保 `toggleAllSelection` 方法存在于 `table` 对象中，并且被正确地声明和实现。 3. 可能是因为异步操作导致了延迟加载 `toggleAllSelection` 方法。如果是异步加载的情况，请确保在调用 `toggleAllSelection` 方法之前，`table` 对象已经被完全加载并初始化。 需要更多的上下文信息才能提供更具体的帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值