微信小程序冒泡事件及其阻止方法實(shí)例分析
更新時間：2018年12月06日 14:18:21 作者：你又開始了
這篇文章主要介紹了微信小程序冒泡事件及其阻止方法,結(jié)合實(shí)例形式分析了事件分類、冒泡及相應(yīng)阻止操作方法,需要的朋友可以參考下
本文實(shí)例講述了微信小程序冒泡事件及其阻止方法。分享給大家供大家參考，具體如下：
事件的類別分為幾種：
- 點(diǎn)擊事件：tap
- 長按事件：longtap
- 觸摸事件：touchstart； touchend；touchcancel；touchmove
- 其他：input；submit....
其中前三類是冒泡事件，其他的稱為非冒泡事件。
寫一個簡單的例子，代碼就不一一貼出來了，WXML的文件如下：
<view class='redview' bindtap='redclick'> 紅色 <view class='yellowview' bindtap='yellowclick'> 黃色 <view class='blueview' bindtap='blueclick'> 藍(lán)色 </view> </view> </view>
效果如圖：
當(dāng)我點(diǎn)擊最內(nèi)層的藍(lán)色方框的時候，打印的結(jié)果如下：
冒泡事件的機(jī)制是先打印點(diǎn)擊的藍(lán)色，也就是最內(nèi)層，然后依次打印第二層和第三層。假設(shè)點(diǎn)擊黃色層，會依次打印出黃色和紅色。點(diǎn)擊紅色時只打印紅色。
但是也可以阻止冒泡事件的發(fā)生，其實(shí)很簡單，直接把bindtap改為catchtap即可。
<view class='redview' bindtap='redclick'> 紅色 <view class='yellowview' bindtap='yellowclick'> 黃色 <view class='blueview' catchtap='blueclick'> 藍(lán)色 </view> </view> </view>
這樣你點(diǎn)擊最內(nèi)層的藍(lán)色，只會打印藍(lán)色而不會打印出黃色和紅色了。但是點(diǎn)擊黃色還是會打印黃色和紅色，這個時候再把黃色頁面的bindtap改成catchtap就可以了。
友情提示：有一部分標(biāo)簽是默認(rèn)在最上層的，比如video，想在video上放一個view然后設(shè)置
catchtap將video覆蓋是無效的。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
為了防止發(fā)生命名沖突，可以建立自己的代碼庫。2009-07-07
滑輪滾動頁面的事件在網(wǎng)頁特效中進(jìn)場遇到，下面通過示例為大家介紹下原生JS綁定滑輪滾動事件并兼容瀏覽器2014-06-06
這篇文章主要介紹了js如何判斷訪問是來自搜索引擎(蜘蛛人)還是直接訪問,需要的朋友可以參考下2015-09-09
如何用JS取得網(wǎng)址中的文件名...2006-08-08
這篇文章主要介紹了微信小程序 checkbox使用實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
Express與NodeJs創(chuàng)建服務(wù)器的兩種方法
本文主要介紹了NodeJs創(chuàng)建Web服務(wù)器；Express創(chuàng)建Web服務(wù)器的兩種方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript Serializer序列化時間處理示例
JavaScriptSerializer序列化時間后會把時間序列化成N進(jìn)制的鬼數(shù)據(jù) ，下面有個示例，需要的朋友可以了解下2014-07-07
JS小功能(onmouseover實(shí)現(xiàn)選擇月份)實(shí)例代碼
這篇文章主要介紹了onmouseover實(shí)現(xiàn)選擇月份實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
淺談JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法
這篇文章主要介紹了JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法，對算法感興趣的同學(xué)，可以參考下2021-05-05
JavaScript具有很好的模塊和方法來發(fā)送可用于從服務(wù)器端資源發(fā)送或接收數(shù)據(jù)的HTTP請求。這篇文章主要介紹了JavaScript中發(fā)出HTTP請求最常用的方法,需要的朋友可以參考下2018-07-07