bindtap就是點擊事件
在.wxml文件綁定:
1 <text id='textId' data-userXxx='100' bindtap='tapMessage'>cilck here</text>
在一個組件的屬性上添加bindtap並賦予一個值(一個函數名)
當點擊該組件時, 會觸發相應的函數執行
在后台.js文件中定義tapMessage函數:
1 //index.js 2 Page({ 3 data: { 4 mo: 'Hello World!!', 5 userid : '1234', 6 }, 7 8 // 定義函數 9 tapMessage: function(event) { 10 console.log(event.target.id); // 可獲得 11 console.log(event.target.name); // 無法獲得, 通過target只能直接獲取id 12 console.log(event.target.dataset); // 要獲得其它屬性, 需要從dataset(數據集)中獲取 13 // userXxx為自定義的屬性名, 但命名方式為:data-userXxx
console.log(event.target.dataset.userXxx);//無法獲得
console.log(event.target.dataset.userxxx);//可獲得
17 } 18 })
event封裝的是該事件的信息, 如上通過它可得到一些數據
注意一點:
1 <!-- data-userXxx,這個大寫的X要改為-x --> 2 <text id='textId' data-user-xxx='100' bindtap='tapMessage'>cilck here</text>
自定義數據時有兩種寫法：
定義為data-userXxx時，讀取數據event.target.dataset.userxxx
定義為data-user-Xxx時，讀取數據event.target.dataset.userXxx
事件冒泡就是指嵌套事件發生
如果多層標簽嵌套, 里層事件發生后, 其外層會相應發生, 如:
1 <view bindtap='handout'> 2 outer 3 <view bindtap='handmiddle'> 4 middle 5 <view bindtap='handinner'>inner</view> 6 </view> 7 </view> 8 9 handout: function () { 10 console.log("out"); 11 }, 12 13 handmiddle: function () { 14 console.log("middle"); 15 }, 16 17 handinner: function () { 18 console.log("inner"); 19 }
點擊inner三個事件都執行, 點擊middlek執行handmiddle和handout, 點擊out只執行handout
阻止事件冒泡行為: 將bindtap改為catchtap就行了, 只會觸發自身的點擊事件
1 <view bindtap='handout'> 2 outer 3 <view catchtap='handmiddle'> 4 middle 5 <view bindtap='handinner'>inner</view> 6 </view> 7 </view>
需要理解是, 它阻斷自身的冒泡行為
如上點擊inner, 執行的是handinner和handmiddle兩個函數
不管是不是自身觸發的點擊行為, 傳到我這里, 我就將它阻斷(不再向上傳遞)