如果寫小程序?qū)Χ卟焕斫獾?那看到這邊博客,將很快幫助到您,

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

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

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

官網(wǎng)上這樣規(guī)定的

事件分類

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

1. 冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。
2. 非冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。

先寫一個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設(shè)置一個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的時候在此看下打印

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

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

現(xiàn)在把第三個設(shè)置catchtap

點擊innerview1的時候再看下打印

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

至此可以發(fā)現(xiàn),bindtap點擊事件在同一個view中會向上冒泡,而catchtap 不會向上冒泡

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。