微信小程序 冒泡事件原理解析
更新時間：2019年09月27日 14:21:33 作者：不睡
這篇文章主要介紹了微信小程序 冒泡事件原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
在微信小程序的事件分為冒泡事件和非冒泡事件：
冒泡事件：當一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。
非冒泡事件：當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。
WXML的冒泡事件列表：
| 類型 | 觸發(fā)條件 | 最低版本 |
|---|---|---|
| touchstart | 手指觸摸動作開始 | |
| touchmove | 手指觸摸后移動 | |
| touchcancel | 手指觸摸動作被打斷，如來電提醒，彈窗 | |
| touchend | 手指觸摸動作結(jié)束 | |
| tap | 手指觸摸后馬上離開 | |
| longpress | 手指觸摸后，超過350ms再離開，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個事件，tap事件將不被觸發(fā) | 1.5.0 |
| longtap | 手指觸摸后，超過350ms再離開（推薦使用longpress事件代替） | |
| transitionend | 會在 WXSS transition 或 wx.createAnimation 動畫結(jié)束后觸發(fā) | |
| animationstart | 會在一個 WXSS animation 動畫開始時觸發(fā) | |
| animationiteration | 會在一個 WXSS animation 一次迭代結(jié)束時觸發(fā) | |
| animationend | 會在一個 WXSS animation 動畫完成時觸發(fā) | |
| touchforcechange | 在支持 3D Touch 的 iPhone 設備，重按時會觸發(fā) | 1.9.90 |
注：除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(詳見各個組件)
事件綁定
以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起，在非原生組件中，bind和catch后可以緊跟一個冒號，其含義不變，如bind:tap、catch:touchstart。
事件冒泡的條件：父元素與子元素綁定同一類事件并且子元素的綁定方式是bind（catch開頭會阻止事件冒泡），代碼如下：
<view id="outter" bindtap="tap1">
outer view
<view id="middle" bindtap="tap2">
middle view
<view id="inner" bindtap="tap3">
inner view
</view>
</view>
</view>
tap1: function (e) {
console.log(1, e)
},
tap2: function (e) {
console.log(2, e)
},
tap3: function (e) {
console.log(3, e)
},
點擊id為inner的元素，同時也觸發(fā)了id為middle和outter的元素
把inner的bindtap改成catchtap就會阻止事件冒泡
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JScript中的"this"關鍵字使用方式補充材料...2007-03-03
經(jīng)常看到這倆哥們，看來看去都是講他們的區(qū)別，一直沒搞太清楚作用究竟是什么，現(xiàn)在記錄下自己理解，有錯的話希望指出！2014-09-09
這篇文章主要給大家介紹了關于js中復選框的取值及賦值的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
獲取時間間隔在日常使用還是比價頻繁的，下面是具體的實現(xiàn)代碼，需要的朋友可以參考下2014-05-05
ECharts?formatter屬性設置的3種方法(字符串模板,函數(shù)模板,回調(diào)函數(shù))
formatter有兩種寫法,一種字符串模板,另一種是回調(diào)函數(shù),下面這篇文章主要給大家介紹了關于ECharts?formatter屬性設置的3種方法,分別是字符串模板,函數(shù)模板,回調(diào)函數(shù),需要的朋友可以參考下2023-02-02
javascript實現(xiàn)查找數(shù)組中最大值方法匯總
本文給大家匯總了一下使用javascript實現(xiàn)查找數(shù)組中最大最小值的一些方法，非常的簡單實用，有需要的小伙伴可以來參考下。2016-02-02
JavaScript通過mouseover()實現(xiàn)圖片變大效果的示例
下面小編就為大家分享一篇JavaScript通過mouseover()實現(xiàn)圖片變大效果的示例，具有很好的參考價值，希望對大家有所幫助2017-12-12
本文,我們來講講如何使用 JavaScript 實現(xiàn)圖片的縮放,當然,我們可以類比到其他的元素,比如視頻的縮放,文中有詳細的代碼示例,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-07-07
本文主要介紹了js實現(xiàn)axios限制請求隊列，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2021-07-07
詳解webpack4.x之搭建前端開發(fā)環(huán)境
這篇文章主要介紹了詳解webpack4.x之搭建前端開發(fā)環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03