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

發(fā)布時(shí)間：2020-09-30 14:07:30 來源：腳本之家閱讀：144 作者：你又開始了欄目：web開發(fā)

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

事件的類別分為幾種：

點(diǎn)擊事件：tap
長按事件：longtap
觸摸事件：touchstart； touchend；touchcancel；touchmove
其他：input；submit....

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

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

<view class='redview' bindtap='redclick'>
 紅色
 <view class='yellowview' bindtap='yellowclick'>
  黃色
  <view class='blueview' bindtap='blueclick'>
   藍(lán)色
  </view>
 </view>
</view>

效果如圖：

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

當(dāng)我點(diǎn)擊最內(nèi)層的藍(lán)色方框的時(shí)候，打印的結(jié)果如下：

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

冒泡事件的機(jī)制是先打印點(diǎn)擊的藍(lán)色，也就是最內(nèi)層，然后依次打印第二層和第三層。假設(shè)點(diǎn)擊黃色層，會依次打印出黃色和紅色。點(diǎn)擊紅色時(shí)只打印紅色。

但是也可以阻止冒泡事件的發(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)擊黃色還是會打印黃色和紅色，這個(gè)時(shí)候再把黃色頁面的bindtap改成catchtap就可以了。

友情提示：有一部分標(biāo)簽是默認(rèn)在最上層的，比如video，想在video上放一個(gè)view然后設(shè)置catchtap將video覆蓋是無效的。

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

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽