uniapp小程序点击事件阻止冒泡

已于 2023-05-31 10:07:58 修改
阅读量922 收藏
点赞数 1
文章标签： uni-app 小程序
于 2023-05-31 09:53:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67434908/article/details/130962662
版权
文章讲述了在uniapp开发小程序时遇到click.stop无法阻止事件冒泡的困扰，作者通过将`@click.stop`改为`@tap.stop`成功解决了问题。在没有参数传递的情景下，`@click.stop`也能正常工作。示例代码展示了如何在嵌套的view组件中使用`@tap.stop`来阻止事件冒泡。
摘要由CSDN通过智能技术生成

uniapp开发的小程序使用click.stop发现无法阻止冒泡，找了半天也不知道什么问题

后来把代码改成了 @click.stop    去阻止事件冒泡的改成  @tap.stop  去阻止事件冒泡

<view  class="contents" v-for="(item, index) in data" :key="index"
	@tap.stop="hotelDetail(item,index)">

</view>

在不传参数的情况下，使用@click.stop也是可以阻止冒泡的，下面贴代码

<view class="u" @click="getSet">
			<view class="u-1" @click="getUp">
				<view class="u-2" @click.stop="getClick"></view>
			</view>
		</view>

点击最里面哪个阻止了继续冒泡

 

不爱敲代码的大帅比
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小说阅读uniapp小程序
06-27
对于小程序部分，开发者需要熟悉微信开发者工具，理解小程序的生命周期、数据绑定、事件处理等特性，并且利用uniapp的API来调用微信小程序的能力，如获取用户信息、网络请求、本地存储等。 【压缩包子文件的文件...
uniapp链接蓝牙小程序
03-25
uniapp链接蓝牙小程序(可发送和接收消息)
uni-app——如何阻止事件冒泡
每天都想吃好吃的
11-01 3108
在开始讨论如何阻止事件冒泡之前，让我们先了解一下什么是事件冒泡事件冒泡是指在DOM树中，当一个元素上的事件被触发时，会沿着父元素一直向上层传递，直到根元素。这种传递过程就像气泡从水底冒出来一样，因此被称为事件冒泡。在uni-app中，事件冒泡是指当一个组件上的事件被触发时，如果该组件有父组件，事件会沿着组件树向上层传递，直到根组件。这样做的好处是可以在父组件中监听子组件的事件，并进行相应的处理。
uniapp的冒泡事件使用@click.stop报错
最新发布
weixin_52830464的博客
07-01 346
icon 在父元素中,父元素本身有点击事件,希望在点击 icon 的时候不要触发父级的点击事件,阻止冒泡,使用 @click.stop 报错。@click.stop 改成 @click.native.stop。在 uview 组件中使用 u-icon 图标,并添加点击事件。
uniapp点击事件阻止冒泡(实用)
qq_45796592的博客
04-28 2830
uniapp针对界面点击子标签会触发父标签进行的处理
uni-app：阻止事件冒泡
我是小鹏呀的博客
03-01 642
需求：点击整个卡片可以跳转详情页，点击下面2个按钮，分别实现不同的点击需求，但是问题出现在点击下面的按钮时也会触发跳转详情页。解决方法：@click.native.stop，阻止事件冒泡。
uniapp阻止事件冒泡
是的啊
02-01 1万+
uniapp阻止事件冒泡 在uniapp项目中，经常会遇到父元素有一个点击事件，其子元素也有一个点击事件，但我们只想触发子元素事件，可是父元素也跟着触发了。我们这时需要给子元素加上阻止事件冒泡就行了 <view @click="myParent()"> //子元素方法 <view @click.stop="mySon()"></view> </view> ...
uniapp 微信小程序tabbar凸起的显示
08-25
在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的动画优化。 首先，我们需要了解微信小程序中的`tabbar`配置。在`app.json`文件中，我们可以定义...
uniapp小程序tabbar图标
07-25
在开发uniapp小程序时，`tabbar`是应用底部固定的导航栏，用于切换不同功能模块。它是用户界面的重要组成部分，提供了便捷的页面间导航。uniapp是一个基于Vue.js的多端开发框架，允许开发者编写一次代码，即可在iOS...
适用 uniapp 小程序使用的 jsencrypt 文件
10-24
uniapp 小程序中 npm 下载 jsencrypt 或者引用包，会因为小程序和h5由于元素的不同出现报错，因此需要更改 jsencrypt 文件去使用
uniapp——阻止冒泡
努力、拼搏、奋进
05-07 670
uniapp——阻止冒泡
（转）uni-app 阻止点击事件冒泡
CaseyWei
04-27 6095
阻止冒泡事件 在使用Uniapp编写的过程中写弹窗时会发现，你给背景设置了点击收起弹窗的状态又给弹窗中提交事件设置了关闭的状态，会发现事件还没执行完弹窗就被收起，很苦恼，但是官方给我们提供了一种全端都使用的阻止冒泡事件: 官方地址： https://uniapp.dcloud.io/use?id=%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e5%99%a8阻止冒泡...
uniapp 点击阻止冒泡
热门推荐
weixin_44097578的博客
07-11 1万+
阻止冒泡事件 在使用Uniapp编写的过程中写弹窗时会发现，你给背景设置了点击收起弹窗的状态又给弹窗中提交事件设置了关闭的状态，会发现事件还没执行完弹窗就被收起，很苦恼，但是官方给我们提供了一种全端都使用的阻止冒泡事件: 官方地址： https://uniapp.dcloud.io/use?id=%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e5%99%a8 阻止冒泡...
微信小程序阻止事件冒泡
qiqimiao_hh的博客
07-11 995
所以阻止微信小程序事件冒泡可以将。
微信小程序阻止冒泡事件
我是小鹏呀的博客
03-23 595
使用catchtap后，点击goClick事件就不会触发detailClick事件。解决方法：阻止冒泡事件：将点击事件bindtap换成catchtap。点击需求，但是问题出现在点击下面的按钮时也会触发跳转详情页。需求：点击整个卡片可以跳转详情页，点击按钮，实现。
在vue和uni中.stop阻止事件冒泡失败？
HHHHH2187的博客
10-08 963
这时候我们可以使用.native事件修饰符，在父组件中给子组件绑定一个原生事件，native修饰符用于在自定义组件上监听原生 DOM 事件。通过使用.native修饰符，可以将原生事件绑定到组件的根元素上。这里我是使用uview的组件行里面插了icon但是单独点击icon会发现 同时触发了u-cell-item的事件。但是我发现使用stop并没有直接阻止的事件冒泡。
uniapp小程序阻止冒泡
03-20
可以使用 stopPropagation() 方法来阻止事件冒泡。在事件处理函数中调用该方法即可。例如： ``` <view @tap="handleTap"> <button @tap="handleButtonTap">点击我</button> </view> methods: { handleTap() { console.log('view 被点击了') }, handleButtonTap(event) { event.stopPropagation() console.log('button 被点击了') } } ``` 在上面的例子中，当点击按钮时，事件不会冒泡到父级 view 上，因此只会输出 "button 被点击了"，而不会输出 "view 被点击了"。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值