微信小程序冒泡事件及其阻止方法實(shí)例分析
本文實(shí)例講述了微信小程序冒泡事件及其阻止方法。分享給大家供大家參考，具體如下：
事件的類(lèi)別分為幾種：
- 點(diǎn)擊事件：tap
- 長(zhǎng)按事件：longtap
- 觸摸事件：touchstart； touchend；touchcancel；touchmove
- 其他：input；submit....
其中前三類(lèi)是冒泡事件，其他的稱(chēng)為非冒泡事件。
寫(xiě)一個(gè)簡(jiǎn)單的例子，代碼就不一一貼出來(lái)了，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)色方框的時(shí)候，打印的結(jié)果如下：
冒泡事件的機(jī)制是先打印點(diǎn)擊的藍(lán)色，也就是最內(nèi)層，然后依次打印第二層和第三層。假設(shè)點(diǎn)擊黃色層，會(huì)依次打印出黃色和紅色。點(diǎn)擊紅色時(shí)只打印紅色。
但是也可以阻止冒泡事件的發(fā)生，其實(shí)很簡(jiǎn)單，直接把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)色，只會(huì)打印藍(lán)色而不會(huì)打印出黃色和紅色了。但是點(diǎn)擊黃色還是會(huì)打印黃色和紅色，這個(gè)時(shí)候再把黃色頁(yè)面的bindtap改成catchtap就可以了。
友情提示：有一部分標(biāo)簽是默認(rèn)在最上層的，比如video，想在video上放一個(gè)view然后設(shè)置
catchtap將video覆蓋是無(wú)效的。
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
微信小程序?qū)崿F(xiàn)商城倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)商城倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
解決js數(shù)據(jù)包含加號(hào)+通過(guò)ajax傳到后臺(tái)時(shí)出現(xiàn)連接錯(cuò)誤
測(cè)試過(guò)程中發(fā)現(xiàn)js數(shù)據(jù)包含加號(hào)+通過(guò)ajax傳到后臺(tái)時(shí)出現(xiàn)連接錯(cuò)誤,刪除+，鏈接暢通了，果然是這塊問(wèn)題，對(duì)加號(hào)進(jìn)行轉(zhuǎn)義2013-08-08
JavaScript實(shí)現(xiàn)獲取select下拉框中第一個(gè)值的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取select下拉框中第一個(gè)值的方法,涉及javascript針對(duì)頁(yè)面元素屬性的相關(guān)獲取操作技巧,需要的朋友可以參考下2018-02-02
定單管理上 JS表格排序...2006-10-10
下面小編就為大家?guī)?lái)一篇javaScript中的原型解析【推薦】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
在javascript中，hash指的是哈希表，是一種根據(jù)關(guān)鍵字直接訪問(wèn)內(nèi)存存儲(chǔ)位置的數(shù)據(jù)結(jié)構(gòu)，hash就是一個(gè)賦值的方法，但實(shí)際用的并不需要太復(fù)雜，能用的就一點(diǎn)點(diǎn)，寫(xiě)法也非常簡(jiǎn)單，hash有多種寫(xiě)法，本文給大家介紹javascript?hash使用，感興趣的朋友一起看看吧2023-10-10
基于javascript實(shí)現(xiàn)tab切換特效
這篇文章主要介紹了基于javascript實(shí)現(xiàn)tab切換特效的相關(guān)資料,具有一定的參考價(jià)值，需要的朋友可以參考下2016-03-03
下面小編就為大家?guī)?lái)一篇js調(diào)用屏幕寬度的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JS動(dòng)態(tài)給對(duì)象添加事件的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇JS動(dòng)態(tài)給對(duì)象添加事件的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10