輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計(jì)服務(wù)
小程序開發(fā)全功能小程序商城、開發(fā)定制服務(wù)、全程售后服務(wù)、無憂備案
分享、交流、傳播知識(shí)分享、技術(shù)交流、經(jīng)驗(yàn)積累、提升能力
在微信小程序開發(fā)中，有時(shí)候需要用到多級點(diǎn)擊事件，如下代碼：
<view class="wzjm-car-box" bindtap="goodsinfo">
<view class="wzjm-car-title">這里是產(chǎn)品的名稱</view>
<view class="wzjm-car-icon" bindtap="addcar">
</view>
</view>
如以上最簡化的代碼，在實(shí)際應(yīng)用中應(yīng)該如下圖：
點(diǎn)擊購物車圖標(biāo)應(yīng)該是直接添加到購物車功能，而點(diǎn)擊購物車圖標(biāo)的產(chǎn)品區(qū)域是進(jìn)入商品詳細(xì)頁，要實(shí)現(xiàn)這樣的功能，需先了解微信小程點(diǎn)擊事件的冒泡功能。
冒泡功能是指點(diǎn)擊事件是否向上級冒泡，如在這里點(diǎn)擊了addcar事件后，繼續(xù)執(zhí)行g(shù)oodsinfo點(diǎn)擊事件，這樣就是定義為冒泡功能，但這明顯和我們實(shí)際應(yīng)用場景不符合。
所以在點(diǎn)擊事件中又多了個(gè)非冒泡功能，就是點(diǎn)擊了addcar事件后，不執(zhí)行g(shù)oodsinfo點(diǎn)擊事件，這樣稱非冒泡功能。
那微信小程序是如何實(shí)現(xiàn)冒泡與非冒泡的功能的呢，通過bindtap與catchtap的點(diǎn)擊事件實(shí)現(xiàn) 。
如果子元素不需要冒泡功能，如上圖中點(diǎn)擊購物車圖標(biāo)，不需要執(zhí)行跳轉(zhuǎn)到商品詳情頁，則購物車圖標(biāo)需使用catchtap點(diǎn)擊事件
看代碼部分：
<view class="wzjm-car-box" bindtap="goodsinfo">
<view class="wzjm-car-title">這里是產(chǎn)品的名稱</view>
<view class="wzjm-car-icon" catchtap="addcar">
</view>
</view>
多級元素的不同點(diǎn)擊事件在非常多的場景會(huì)使用到，大家了解冒泡與非冒泡事件的處理方式就實(shí)現(xiàn)起來就非常簡單了。
