微信小程序之bindtap&&catchtap的區別

前言

      接觸微信小程序開發有些時候了, 對基礎的知識掌握得不夠牢固, 就會致使反覆去搜索查找相同知識點, 這是下降工做效率的一種行爲, 多總結記憶基礎知識才是王道=.=
      接下來, 主要是對微信小程序事件之bindtap&&catchtap作個知識區分鞏固~

舉例說明

// wxml
<view class="outer" bindtap="outerTapFn">
  <text>外層父元素</text>
  <view class="inner" bindtap="innerTapFn" data-sex="male">內層子元素</view>
</view>

// wxss
.outer{
  width: 500rpx;
  height: 500rpx;
  margin: 0 auto;
  border: 2rpx solid red;
}
.inner{
  width: 300rpx;
  height: 300rpx;
  text-align: center;
  line-height: 300rpx;
  border: 2rpx solid #cccccc;
  margin: 0 auto;
}

// js
  outerTapFn(e) {
    console.log("我是外層父元素被點擊了=.=");
  },
  innerTapFn(e) {
    console.log("我是內層子元素被點擊了=.=");
  },
複製代碼

先copy一波代碼, 並在微信開發者工具上看下頁面效果

接下來, 按照以下操做點擊, 分別看下控制檯輸出的是什麼內容~
A) 點擊外層父元素區域
控制檯輸出: 我是外層父元素被點擊了=.=
B) 點擊內層子元素區域
控制檯輸出: 我是內層子元素被點擊了=.=       我是外層父元素被點擊了=.=

接下來, 將上述代碼的bindtap="innerFn"改寫成catchtap="innerFn"
按照以下操做點擊, 分別看下控制檯輸出的是什麼內容~ A) 點擊外層父元素區域
控制檯輸出: 我是外層父元素被點擊了=.=
B) 點擊內層子元素區域
控制檯輸出: 我是內層子元素被點擊了=.=

到了這裏, 你就應該發現了些微妙之處了, 讓咱們總結一下！

總結: 子元素用bindtap綁定事件以後, 會冒泡到父元素; But若子元素用catchtap綁定事件以後,卻不會冒泡到父元素;

bindtap跟catchtap的異同

1. 相同點:
   A) 都是點擊事件函數,接受一個參數event, 該參數攜帶一些信息, 如type,currentTarget,target等;
2. 不一樣點:
   A) bindtap會冒泡到父元素;
   B) catchtap阻止事件冒泡到父元素;

至此, 關於二者的區別已經闡述完成, 接下來我會進一步剖析currentTarget跟target的區別, 感興趣的能夠繼續往下看, 還請多多指教~

事件之target&&currentTarget區別

仍是採用上面的wxml&&wxss代碼, 此次咱們修改下js代碼的打印值;

// js
  outerTapFn(e) {
    console.log("我是外層父元素被點擊了=.=",e);
  },
  innerTapFn(e) {
    console.log("我是內層子元素被點擊了=.=",e);
  },
複製代碼

採用bindtap的方式,點擊內層子元素區域, 看下控制檯的打印狀況:

因爲本人學術不精, 暫時沒有想到更好的文字去描述此種關係, 故先摘錄他人優秀語錄以下:

      target對應的是觸發事件的源頭組件，這個組件有多是子組件，有多是父組件，主要是看執行動做的區域。而currentTarget始終對應事件所綁定的組件;

最後

      剛開始寫文章, 如有任何不對的地方, 還請讀者朋友們評論喲,您的點贊就是我最大的動力~