微信小程序bindtap與catchtap的區別

1、bindtap和catchtap的區別

(1) 相同點：首先他們都是作為點擊事件函數，就是點擊時觸發。在這個作用上他們是一樣的，可以不做區分。
(2) 不同點：他們的不同點主要是bindtap是冒泡的，catchtap是非冒泡的。

2、例子

1、假如有三個view點擊事件都是用的bindtap，三個view是層級包含關系?

<view id="outer" bindtap="out">
    outer view
    <view id="middle" bindtap="middle">
        middle view
        <view id="inner" bindtap="inner">
            inner view
        </view>
    </view>
</view>

　　

 2、我么在js里代碼是在相對應的事件打印出log，代碼如下?

out:function(e){
    console.log("--out bindtap click")
}, middle: function (e) {
    console.log("--middle bindtap click")
}, inner: function (e) {
    console.log("--inner bindtap click")
}

 

3、bindtap執行結果

點擊out view打印出一條log --> out bindtap click

點擊middle view打印出兩條log --> middle bindtap click--out bindtap click

點擊innew view打印出三條log --> inner bindtap click--middle bindtap click--out bindtap click

可以看出bindtap不阻止向上冒泡，所以點擊inner一直冒泡到了最外層。

 

4、如果我們只修改middle view的bindtap為catchtap

點擊out view打印出一條log --> out bindtap click（因為沒有上層元素故而無法向上冒泡）

點擊middle view打印出一條log --> middle bindtap click（catchtap阻止向上冒泡）

點擊innew view打印出兩條log --> inner bindtap click（catchtap阻止向上冒泡）