本文實例講述了微信小程序冒泡事件及其阻止方法。分享給大家供大家參考，具體如下：

事件的類別分為幾種：

• 點擊事件：tap
• 長按事件：longtap
• 觸摸事件：touchstart； touchend；touchcancel；touchmove
• 其他：input；submit....

其中前三類是冒泡事件，其他的稱為非冒泡事件。

寫一個簡單的例子，代碼就不一一貼出來了，WXML的文件如下：

<view class='redview' bindtap='redclick'> 紅色 <view class='yellowview' bindtap='yellowclick'>  黃色  <view class='blueview' bindtap='blueclick'>   藍色  </view> </view></view>

效果如圖：

當我點擊最內層的藍色方框的時候，打印的結果如下：

冒泡事件的機制是先打印點擊的藍色，也就是最內層，然后依次打印第二層和第三層。假設點擊黃色層，會依次打印出黃色和紅色。點擊紅色時只打印紅色。

但是也可以阻止冒泡事件的發生，其實很簡單，直接把bindtap改為catchtap即可。

<view class='redview' bindtap='redclick'> 紅色 <view class='yellowview' bindtap='yellowclick'>  黃色  <view class='blueview' catchtap='blueclick'>   藍色  </view> </view></view>

這樣你點擊最內層的藍色，只會打印藍色而不會打印出黃色和紅色了。但是點擊黃色還是會打印黃色和紅色，這個時候再把黃色頁面的bindtap改成catchtap就可以了。

友情提示：有一部分標簽是默認在最上層的，比如video，想在video上放一個view然后設置catchtap將video覆蓋是無效的。

希望本文所述對大家微信小程序開發有所幫助。