微信小程序:冒泡事件及其阻止


事件的類別分為幾種:

       點擊事件: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覆蓋是無效的。

 

轉: https://blog.csdn.net/qq_36002582/article/details/78755427

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM