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

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證，主要從事成都做網(wǎng)站、成都網(wǎng)站制作、企業(yè)網(wǎng)站建設(shè)、成都手機(jī)網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、成都品牌網(wǎng)站建設(shè)、網(wǎng)頁制作、做網(wǎng)站、建網(wǎng)站。創(chuàng)新互聯(lián)建站擁有實(shí)力堅(jiān)強(qiáng)的技術(shù)研發(fā)團(tuán)隊(duì)及素養(yǎng)的視覺設(shè)計(jì)專才。

事件的類別分為幾種：

• 點(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>

效果如圖：

當(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í)很簡單，直接把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í)候再把黃色頁面的bindtap改成catchtap就可以了。

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

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

網(wǎng)站名稱：微信小程序冒泡事件及其阻止方法實(shí)例分析
網(wǎng)頁網(wǎng)址：http://chinadenli.net/article6/ppdhig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、Google、關(guān)鍵詞優(yōu)化、搜索引擎優(yōu)化、ChatGPT、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)