微信小程序中bind和catch的区别

2019-01-26  本文已影响1人  bianruifeng

bindtap 冒泡事件,事件绑定不会阻止冒泡事件向上冒泡
catchtap 非冒泡事件, 事件绑定阻止冒泡事件向上冒泡

这种解释难理解,不能忍!!!

bindtap 触发信号可向下传递
(收到触发信号->执行绑定事件->信号向父视图、类传递,即:向上冒泡)
catchtap 触发信号不可传递
(收到触发信号->执行绑定事件->信号不在传递,即:非冒泡)

示例:

<view class='v1' bindtap='v1tap'>v1
      <view class='v2' catchtap='v2tap'>v2
          <view class='v3' bindtap='v3tap'>v3
          </view>
      </view>
</view>
    v1tap: function(e) {
        console.log("--v1tap click")
    },
    v2tap: function(e) {
        console.log("--v2tap click")
    },
    v3tap: function(e) {
        console.log("--v3tap click")
    }
v3红色、v2黄色、v1紫色.png
#点击v3
--v3tap click
--v2tap click
--v1tap click
#点击v2
--v2tap click
--v1tap click
#点击v1
--v1tap click
#点击v3,v2接收到事件并拦截,不会传递给v1
--v3tap click
--v2tap click
#点击v2
--v2tap click
#点击v1
--v1tap click
上一篇下一篇

猜你喜欢

热点阅读