uniapp报错：使用uview 中 u-icon 点击 阻止冒泡 @click.stop 报错

最新推荐文章于 2023-12-20 13:20:06 发布
最新推荐文章于 2023-12-20 13:20:06 发布
阅读量501 收藏
点赞数
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45650243/article/details/130656965
版权

项目场景：

在 uview 组件中使用 u-icon 图标,并添加点击事件，icon 在父元素中阻止冒泡,使用 @click.stop 报错

在这里插入图片描述

Uniapp不支持stopPropagation，event对象并非浏览器的evnet对象，其本来没有stopPropagation方法，文档中也从未提及支持stopPropagation方法

解决方案就是使用@click.navtive.stop即可！
在这里插入图片描述

桀.月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp-tailwind-uview-starter:利用uniapp + tailwindcss + uview构建的一套基础模板，可以使用Webstorm或者vscode开发
04-03
uniapp-tailwind-uview-starter利用uniapp + tailwindcss + uview构建的一套基础模板背景：之前用uniapp + uview开发了一大一小两个小程序， css方案用的原子风格的，发现用的还是挺爽的，就在想能不能用上tailwind...
uniapp uView u-picker组件三级联动Demo
02-12
- 4、点击 `请选择` 行，弹出选择框 - 5、change第一列时：第二列的数据为第一列高亮选项的详情；并把第三列的数据改变为第二列第一行的数据详情 - 6、change第二列时：第三列的数据为第二列高亮选项的详情 - 7、...
uniapp-uni-icons组件@click.stop失败解决~
最新发布
Yjx的博客
12-20 945
不能用在uniapp组件uni-icons上，我们在外层包裹一层view标签，将点击事件放在view标签上即可，希望这个小技巧能帮助到您~
uniapp点击事件阻止冒泡(实用)
qq_45796592的博客
04-28 2784
uniapp针对界面点击子标签会触发父标签进行的处理
vue或uni中.stop阻止事件冒泡报错的问题（修饰符.native）
zhangjiayu88的博客
04-02 4885
在开发中我们常常会遇到要阻止事件冒泡的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function。这是因为当事件添加到Vue组件上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。1.native修饰符可以让父组件接收到原生事件, 否则只能接收自定义事件(通过子组件$emit触发)；2. native修饰符只能用在组件上, 不能用在原生标签上。，就可以解决这个报错问题。
uniapp uni-icons 使用@click.stop报错
weixin_72271537的博客
08-26 816
Uncaught TypeError: Cannot read property 'stopPropagation' of undefined
uniapp uview 中阻止switch开关的事件冒泡
daoxiaofei的博客
12-13 2625
在做项目的时候遇到了switch和祖父元素事件冒泡的问题。刚开始想的解决办法是在change里面加e.preventDefault来阻止，然鹅不生效。就抱着试一试的方法在switch的父元素加上stop试试，竟然成功了。 <view v-for="(item, index) in deviceList" :key="index" @tap="airPanel(item, deviceType)" > <view class="device-switch" @tap.stop.pr
解决uView添加自定义图标不成功
renovateF5的博客
07-11 2736
自定义图标的添加方法：CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架这里1.0版本和2.0版本教程都是一样的，估计是很长没解决了。解决步骤：1.先按照上述链接把图标css文件下载下来，然后把css中的修改成和官方教程中的一样2.修改css中的类名，把custom-icon改成custom-icon-，（原理在最下面） 3.写代码，把图标引入进去，注意这里用的代码和官方的不同 原理（可以不看）：官方说的给两个值
uniapp里面使用uview-ui框架
05-14
uniapp里面使用uview-ui框架
uview中u-picker实多级选择.zip 下载即用
10-24
只需要复制组件框架，data中定义的数据，以及methods中的方法即可实现； 兄弟们，不敢骗你们，我找了好久，好多假的，没效果的，不如直接下载我的， 有问题可随时联系，不容易，找了几天u-picker三级联动的使用方法...
uView-UI_1.8.3.zip
04-01
在uniapp中，uView-UI的集成十分简单。只需在项目的`main.js`文件中引入uView的核心模块，然后在需要使用组件的页面导入相应组件即可。这样的设计大大降低了开发门槛，使得即使是对uniapp不熟悉的开发者也能快速上手...
click.stop 阻止事件冒泡
dongnihao的博客
07-24 1163
这意味着，如果在一个嵌套的元素上使用了 `click.stop` 修饰符，那么当该元素被点击时，该元素上的处理函数会被触发，但是事件不会继续传播到父元素上。在上面的代码中，当用户点击“Click me”按钮时，只会触发该按钮上的处理函数，而不会触发父元素上的处理函数。在上面的代码中，当用户点击“Submit”按钮时，`submitForm` 方法会被调用，并且使用了 `prevent` 修饰符来阻止表单提交。`click` 和 `click.stop` 都是事件修饰符，用于处理鼠标点击事件。
@click.stop阻止冒泡(点击子组件，不调用父组件的点击事件)
weixin_53898445的博客
07-11 835
点击子组件，不调用父组件的点击事件
vue 阻止事件冒泡常用的方法
热门推荐
花生日记
05-30 1万+
在这个例子中，我们在 `@click` 事件上添加了 `.stop` 修饰符，这样就可以阻止事件冒泡，只触发 `childClick` 方法。在这个例子中，当点击按钮时，只会触发 `childClick` 方法，而不会触发 `parentClick` 方法。在事件处理函数中，可以通过调用事件对象的 `stopPropagation()` 方法来阻止事件冒泡。2. event.stopPropagation()：在方法中使用，阻止事件冒泡。1. @click.stop：在模板中使用，阻止点击事件冒泡。
uniapp 报错之 uview 中 u-icon 点击 阻止冒泡 @click.stop 报错
YZRHANYU的博客
11-21 3182
uniapp 报错之 uview 中 u-icon 点击 阻止冒泡 @click.stop 报错
一个因@click.stop引发的bug
weixin_34380948的博客
11-16 499
问题 在项目页面中使用 element popover，设置trigger='click'时点击外部不会触发自动隐藏，但在 element 官网中是可以正常触发的（官方示例），项目中的菜单是自定义写的，所以怀疑是有黑魔法。 查找原因 将 popover 写在app.vue根组件内，发现可以正常触发自动隐藏。 在app.vue的 mounted 钩子中加入window.addEventListen...
Uniapp 微信小程序@click点击事件失效
qq_51574759的博客
08-26 1万+
我在一个页面上做了一个遮罩层，遮罩层上面绑定了点击事件，有一些能被点击，但是有一些还是失效了。层级遮盖的问题，但其实，就算遮罩层明显可见，遮罩在页面上方，当页面和遮罩层都默认保持同一个。，有时候虽然本地测试是好的，但是也不能保证在所有分辨率不同的屏幕上没有BUG。的时候，可能因为隐藏的遮盖效，而导致触发点击处被遮盖，导致无法点击。所以建议，当需要在遮罩层上设置点击事件的时候，不要偷懒，手动设定。因为遮罩层明显可见，所以我就没有考虑是。之类的方法，还有可能有一个错误。...
Vue中@click.stop与@click.prevent、@click.native
qq_40925546的博客
06-21 8306
Vue中@click.stop与@click.prevent、@click.native
uniapp+uview @tap.stop=“stop“阻止冒泡失效 bug
名人卷耶
12-08 7366
阻止事件冒泡时，直接在需要使用的方法上加 .stop 无效，需要在外层加一层标签 <view @tap.stop=“stop”>
uniapp uview正确使用u-scroll-list
07-12
1. 在uni-app项目中导入uview-ui组件库。你可以参考uview官方文档来进行导入：https://www.uviewui.com/components/quickstart.html 2. 在需要使用u-scroll-list的页面中，引入u-scroll-list组件。可以使用以下代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值