bindtap就是點(diǎn)擊事件

在.wxml文件綁定:

cilck here

在一個(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):

cilck here

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

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

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

如果多層標(biāo)簽嵌套, 里層事件發(fā)生后, 其外層會(huì)相應(yīng)發(fā)生, 如:

outer

middle

inner

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)擊事件

outer

middle

inner

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:微信小程序BindTap快速連續(xù)點(diǎn)擊目標(biāo)頁(yè)面跳轉(zhuǎn)多次問(wèn)題處理

微信小程序視圖控件與bindtap之間的問(wèn)題的解決

微信小程序?qū)崿F(xiàn)bindtap等事件傳參

微信小程序冒泡事件及其阻止方法實(shí)例分析

微信小程序 頁(yè)面滑動(dòng)事件的實(shí)例詳解

微信小程序 觸控事件詳細(xì)介紹

總結(jié)

以上是生活随笔為你收集整理的微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。