微信小程序bindtap事件與冒泡阻止詳解

發(fā)布時間：2020-10-20 16:44:14 來源：腳本之家閱讀：284 作者：智昕欄目：web開發(fā)

bindtap就是點擊事件

在.wxml文件綁定:

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

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

當點擊該組件時, 會觸發(fā)相應的函數(shù)執(zhí)行

在后臺.js文件中定義tapMessage函數(shù):

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

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

注意一點:

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

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

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

事件冒泡就是指嵌套事件發(fā)生

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

<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三個事件都執(zhí)行, 點擊middlek執(zhí)行handmiddle和handout, 點擊out只執(zhí)行handout

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

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

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

如上點擊inner, 執(zhí)行的是handinner和handmiddle兩個函數(shù)

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

微信小程序bindtap事件與冒泡阻止詳解

猜你喜歡

最新資訊

相關推薦

相關標簽