微信小程序 绑定事件 bind 和 catch 理解

本文通过实例代码介绍了微信小程序中bind和catch的使用区别,重点讲解了事件冒泡现象以及如何通过catch阻止事件冒泡。实践过程中发现,catch可以有效地控制事件处理的层次,避免上级事件被触发。
摘要由CSDN通过智能技术生成

前言


最近在开发的一个小程序中遇到了关于bind和catch的小问题,之前其实也学过bind和catch的区别、以及对冒泡的理解,但还是决定自己实践一下。

直接上代码

// wxml
<view bindtap="tapA">
  tapA
  <view bindtap="tapB">
    tapB
    <view bindtap="tapC">
      tapC
    </view>
  </view>
</view>

// js
tapA(){
    console.log("tapA")
},
tapB(){
    console.log("tapB")
},
tapC(){
    console.log("tapC")
},

点击tapA  
 

输出:tapA

点击tapB  

输出:tapB  
           tapA

点击tapC

输出:tapC  
           tapB  
           tapA

总结:

使用bind,点击内部元素就会造成冒泡,从内部事件到外部事件一层一层触发。

将bindtap="tapC"改为catchtap="tapC

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值