微信小程序bindtap事件與冒泡阻止詳解
更新時間：2019年08月08日 11:28:54 作者：智昕
這篇文章主要介紹了小程序bindtap事件與冒泡阻止詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
bindtap就是點擊事件
在.wxml文件綁定:
<text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text>
在一個組件的屬性上添加bindtap并賦予一個值(一個函數(shù)名)
當點擊該組件時, 會觸發(fā)相應(yīng)的函數(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ā)生后, 其外層會相應(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");
}
點擊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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于uniapp頁面跳轉(zhuǎn)的五種方式,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-03-03
本文記錄下JS中產(chǎn)生標識符方式的演變，從ES5到ES6，ES5及其之前是一種方式，只包含兩種聲明（var/function），ES6則增加了一些產(chǎn)生標識符的關(guān)鍵字，如 let、const、class。2015-06-06
這篇文章主要介紹了ECMAScript6塊級作用域及新變量聲明（let） 的相關(guān)資料,需要的朋友可以參考下2015-06-06
下面小編就為大家?guī)硪黄獨w納下js面向?qū)ο蟮膸追N常見寫法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
在JavaScript領(lǐng)域,URL 驗證方面有了新消息！多年來,人們一直在討論JavaScript沒有一種簡便的方法來驗證 URL,現(xiàn)在有了一種新方法URL.canParse(),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了js實現(xiàn)class樣式的修改、添加及刪除的方法,主要通過修改標簽的className來實現(xiàn)這一功能,非常具有實用價值,需要的朋友可以參考下2015-01-01
JavaScript使用readAsDataUrl方法預(yù)覽圖片
這篇文章主要為大家詳細介紹了JavaScript使用readAsDataUrl方法預(yù)覽圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
prettify是Google提供的一款源代碼語法高亮著色器，它提供一種簡單的形式來著色HTML頁面上的程序代碼，最值得亮點的地方是不需要指明代碼的語言類型，它會自動進行判斷。2010-12-12
如何寫JavaScript才能逼格更高呢？怎樣才能、讓別人一眼看出你不簡單呢？是否很期待別人在看完你的代碼之后感嘆一句原來還可以這樣寫呢？下面列出一些在JavaScript時的裝逼技巧，也可說是非常實用的寫法2020-05-05
這篇文章主要介紹了javascript正則表達式定義,對于JavaScript正則表達式的語法進行了總結(jié)分析,需要的朋友可以參考下2016-01-01