微信小程序bindtap事件與冒泡阻止詳解
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.js
Page({
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è)大寫的X要改為-x -->
<text id='textId' data-user-xxx='100' bindtap='tapMessage'>cilck here</text>
自定義數(shù)據(jù)(data-)中的大寫改為 短橫線+其小寫
取數(shù)據(jù)時(shí), 去掉data和那些短橫線并還原大寫 (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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript深拷貝的幾種實(shí)現(xiàn)方法實(shí)例
javascript深拷貝是初學(xué)者甚至有經(jīng)驗(yàn)的開發(fā)著,都會(huì)經(jīng)常遇到問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于JavaScript深拷貝的幾種實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了JavaScript 函數(shù)柯里化的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
JavaScript實(shí)現(xiàn)瀑布流布局詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript瀑布流的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-07-07
用JS實(shí)現(xiàn)網(wǎng)頁(yè)元素陰影效果的研究總結(jié)
用JS實(shí)現(xiàn)網(wǎng)頁(yè)元素陰影效果的研究總結(jié)...2007-08-08
js獲取某月的最后一天日期的簡(jiǎn)單實(shí)例，需要的朋友可以參考一下2013-06-06
微信小程序input框中加入小圖標(biāo)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序input框中加入小圖標(biāo)的實(shí)現(xiàn)方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
跟我學(xué)習(xí)javascript的for循環(huán)和for...in循環(huán)
跟我學(xué)習(xí)javascript的for循環(huán)和for...in循環(huán)，它們是JavaScript中提供了兩種方式迭代對(duì)象，本文就和大家一起學(xué)習(xí)for循環(huán)和for...in循環(huán)，感興趣的小伙伴們可以參考一下2015-11-11
getElementByIdx_x js自定義getElementById函數(shù)
最近看JS代碼，發(fā)現(xiàn)不少人問(wèn)getElementByIdx_x是什么函數(shù)，其實(shí)就是個(gè)getElementById自定義函數(shù)2012-01-01
javascript 動(dòng)態(tài)腳本添加的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇javascript 動(dòng)態(tài)腳本添加的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JS獲取當(dāng)前頁(yè)面名稱的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS獲取當(dāng)前頁(yè)面名稱的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08