小程序bindtap事件與冒泡

bindtap就是點擊事件

在.wxml文件綁定:

<text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text>

在一個組件的屬性上添加bindtap並賦予一個值(一個函數名)

當點擊該組件時, 會觸發相應的函數執行

在后台.js文件中定義tapMessage函數:

//index.js
Page({
  data: {
    mo: 'Hello World!!',
    userid : '1234',
  },
 
   // 定義函數
  tapMessage: function(event) {
    console.log(event.target.id);       // 可獲得
    console.log(event.target.name);     // 無法獲得, 通過target只能直接獲取id
    console.log(event.target.dataset);  // 要獲得其它屬性, 需要從dataset(數據集)中獲取
    console.log(event.target.dataset.userxxx);  // userxxx為自定義的屬性名, 但命名方式為:data-userxxx
  
    // 這里還原使用userXxx
    console.log(event.target.dataset.userXxx);
  }
})

 event封裝的是該事件的信息, 如上通過它可得到一些數據

注意一點:

                  <!-- data-userXxx,這個大寫的X要改為-x -->
    <text id='textId' data-user-xxx='100' bindtap='tapMessage'>cilck here</text>

 

自定義數據(data-)中的大寫改為 短橫線+其小寫

取數據時, 去掉data和那些短橫線並還原大寫 (data-user-xxx  --> userXxx)

 

事件冒泡就是指嵌套事件發生

如果多層標簽嵌套, 里層事件發生后, 其外層會相應發生, 如:

 <view bindtap='handout'>
    outer
    <view bindtap='handmiddle'>
      middle
      <view bindtap='handinner'>inner</view>
    </view>
  </view>

 

  handout: function () {
    console.log("out");
  },
 
  handmiddle: function () {
    console.log("middle");
  },
 
  handinner: function () {
    console.log("inner");
  }

 點擊inner三個事件都執行, 點擊middlek執行handmiddle和handout, 點擊out只執行handout

阻止事件冒泡行為: 將bindtap改為catchtap就行了, 只會觸發自身的點擊事件

 <view bindtap='handout'>
    outer
    <view catchtap='handmiddle'>
      middle
      <view bindtap='handinner'>inner</view>
    </view>
  </view>

需要理解是, 它阻斷自身的冒泡行為

如上點擊inner, 執行的是handinner和handmiddle兩個函數

不管是不是自身觸發的點擊行為, 傳到我這里, 我就將它阻斷(不再向上傳遞)