如果寫小程序對二者不理解的,那看到這邊博客,將很快幫助到您,

個人總結的一句話:,bindtap點擊事件在同一個view中會向上冒泡,而catchtap 不會向上冒泡

下面會有一個demo給出解釋,

說他們使用的時候先說下微信小程序的事件分類冒泡事件與非冒泡事件

官網上這樣規定的

事件分類

事件分為冒泡事件和非冒泡事件：

1. 冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞。
2. 非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。

先寫一個demo

<view class="intro">

<view id="outer" bindtap="handleTap1">

outer view

<view id="middle" bindtap="handleTap2">

middle view

<view id="inner" bindtap="handleTap3">

inner view

<view id="inner" bindtap="handleTap4">

inner view1

</view>

</view>

</view>

</view>

</view>

?

給沒一個view設置一個bindtap??

在js中打印點擊事件

handleTap1:function(){

console.log("=============hly","handleTap1")

},

?

handleTap2: function () {

console.log("=============hly", "handleTap2")

},

?

handleTap3: function () {

console.log("=============hly", "handleTap3")

},

?

handleTap4: function () {

console.log("=============hly", "handleTap4")

},

?

點擊inner view1 的時候看下打印

點擊inner view的時候再看下打印

點擊middle view的時候在此看下打印

也就是說點擊的時候它把最外面的幾個也打印了 也是冒泡到其他事件,當然這個時候就是想阻止它了

這個時候點擊事件就可以設置catchtab了,

現在把第三個設置catchtap

點擊innerview1的時候再看下打印

變成了2個,也就是tap3阻止了其向上冒泡, 當然如果把第四個設置catchtap的話 其也會起到阻止的作用,

至此可以發現,bindtap點擊事件在同一個view中會向上冒泡,而catchtap 不會向上冒泡

總結

以上是生活随笔為你收集整理的微信小程序bindtap 与 catchtap 是使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。