本文實(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ā)有所幫助。