bindtap就是點(diǎn)擊事件
在.wxml文件綁定:
<text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text>
在一個(gè)組件的屬性上添加bindtap并賦予一個(gè)值(一個(gè)函數(shù)名)
當(dāng)點(diǎn)擊該組件時(shí), 會(huì)觸發(fā)相應(yīng)的函數(shù)執(zhí)行
在后臺(tái).js文件中定義tapMessage函數(shù):
//index.jsPage({ data: { mo: 'Hello World!!', userid : '1234', }, // 定義函數(shù) tapMessage: function(event) { console.log(event.target.id); // 可獲得 console.log(event.target.name); // 無(wú)法獲得, 通過(guò)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封裝的是該事件的信息, 如上通過(guò)它可得到一些數(shù)據(jù)
注意一點(diǎn):
<!-- data-userXxx,這個(gè)大寫(xiě)的X要改為-x --><text id='textId' data-user-xxx='100' bindtap='tapMessage'>cilck here</text>
自定義數(shù)據(jù)(data-)中的大寫(xiě)改為 短橫線+其小寫(xiě)
取數(shù)據(jù)時(shí), 去掉data和那些短橫線并還原大寫(xiě) (data-user-xxx --> userXxx)
事件冒泡就是指嵌套事件發(fā)生
如果多層標(biāo)簽嵌套, 里層事件發(fā)生后, 其外層會(huì)相應(yīng)發(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");}點(diǎn)擊inner三個(gè)事件都執(zhí)行, 點(diǎn)擊middlek執(zhí)行handmiddle和handout, 點(diǎn)擊out只執(zhí)行handout
阻止事件冒泡行為: 將bindtap改為catchtap就行了, 只會(huì)觸發(fā)自身的點(diǎn)擊事件
<view bindtap='handout'> outer <view catchtap='handmiddle'> middle <view bindtap='handinner'>inner</view> </view> </view>
需要理解是, 它阻斷自身的冒泡行為
如上點(diǎn)擊inner, 執(zhí)行的是handinner和handmiddle兩個(gè)函數(shù)
不管是不是自身觸發(fā)的點(diǎn)擊行為, 傳到我這里, 我就將它阻斷(不再向上傳遞)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
