微信小程序冒泡事件及其阻止方法實例分析

更新時間：2018年12月06日 14:18:21 作者：你又開始了

這篇文章主要介紹了微信小程序冒泡事件及其阻止方法,結合實例形式分析了事件分類、冒泡及相應阻止操作方法,需要的朋友可以參考下

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

事件的類別分為幾種：

點擊事件：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>

效果如圖：

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

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

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

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

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