微信与uniapp事件阻止冒泡

这篇博客探讨了在微信小程序中如何使用`catchtap`事件来阻止冒泡,展示了一个处理单元格详情和状态更新的示例。同时,也介绍了在uniAPP中使用`@click.native.stop`来阻止事件冒泡并实现查看位置的功能。
摘要由CSDN通过智能技术生成

微信

整个单元格点击进入详情,按钮事件进入操作界面

111

catchtap 阻止冒泡

   <view class="cell_detail" wx:for="{{weightList}}" wx:key="id" bindtap="goDetailHandler" data-type="{{item.id}}">
      <!-- 状态 -- 时间 -->
      <view class="cell_top" wx:if="{{item.shenhe_status == 2}}">
        <text class="status">待修改</text>
<!-- catchtap 事件阻止冒泡 -->
        <button class="status-btn" catchtap="goUpdateHandler" data-type="{{item.id}}">去修改</button>
      </view>
      <view class="cell_top" wx:elif="{{item.shenhe_status == 0 || item.shenhe_status == null}}">
        <text class="status" style="color: #1281FB;background-color: #E6F2FF;">待审核</text>
        <button class="status-btn" catchtap="goAuditHandler" data-type="{{item.id}}">去审核</button>
      </view>
      <view class="cell_top" wx:else>
        <text class="status" style="color: #36C98E;background-color: #ECFFF8;">已审核</text>
      </view>

#uniAPP

@click.native.stop 阻止冒泡

  <view class="bbkh1" @click.native.stop="lookLocation($event)" >
							查看位置
						</view>
// 阻止前往详情事件
			lookLocation(e){
				e.preventDefault(); // 阻止事件冒泡穿透
				console.log('查看位置');
			},
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值