微信小程序組件——bindtap和catchtap的區別

了解知識點

• DOM模型是一個樹形結構，在DOM模型中，HTML元素是有層次的。當一個HTML元素上產生一個事件時，該事件會在DOM樹中元素節點與根節點之間按特定的順序傳播，路徑所經過的節點都會收到該事件，這個傳播過程就是DOM事件流。
• JS冒泡事件：當一個元素上的事件被觸發的時候，比如說鼠標點擊了一個按鈕，同樣的事件將會在那個元素的（所有祖先元素）中被觸發。這 一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層

共同點

• 在微信小程序的事件機制中，bindtap和catchtap都可以觸發一個組件的點擊事件，代碼如下

  <!--bindtap-->
  <view class="parentBox" bindtap="onParentHandler">parentB
    <view class="childBox" bindtap="onChildHandler">childB</view>
  </view>
  
  <!--catchtap-->
  <view class="parentBox" catchtap="onParentHandler">parentB
    <view class="childBox" catchtap="onChildHandler">childB</view>
  </view>

• Next

區別

• bindtap
  • 測試實例如下
    • XXML代碼如下

      <view class="parentBox" bindtap="onParentHandler">parentB
        <view class="childBox" bindtap="onChildHandler">childB</view>
      </view>

      

    • js如下

      //點擊parentB
        onParentHandler:function(){
          console.log("點擊parentB");
        },
        //點擊childB
        onChildHandler: function () {
          console.log("點擊childB");
        },

    • 點擊父節點parentBox，打印結果如下
      
    • 點擊子節點childBox，打印結果如下
      
    • Next
  • 測試結論：bindtap不能阻止事件冒泡
  • Next
• catchtap
  • 測試實例如下
    • XXML代碼如下

      <view class="parentBox" catchtap="onParentHandler">parentB
        <view class="childBox" catchtap="onChildHandler">childB</view>
      </view>

      

    • js代碼如下

      //點擊parentB
        onParentHandler:function(){
          console.log("點擊parentB");
        },
        //點擊childB
        onChildHandler: function () {
          console.log("點擊childB");
        },

    • 點擊父節點parentBox，打印結果如下
      
    • 點擊子節點childBox，打印結果如下
      
    • Next
  • 測試結論：catchtap可以阻止事件冒泡
  • Next
• Next