微信小程序
bindtap和catchtap的区别
2022-04-12

bindtap和catchtap都属于点击事件函数,将事件绑定到组件上,点击组件后可以触发函数。

二者的区别在于是否冒泡事件。

冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。

非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

举一个例子说明:

wxml部分:

bindtap和catchtap的区别(图1)

说明:由以上代码可以看到,总共包含了三个view,其中id=outer 为最外层的父节点,绑定了bindtap事件;id=middle,绑定了catchtap事件,是id=inner 的父节点;id=inner组件绑定了bindtap事件。

.js部分:

bindtap和catchtap的区别(图2)

调试结果:

1.点击 inner view时,输出结果:


                         bindtap和catchtap的区别(图3)

2.点击middle view时,输出结果:


bindtap和catchtap的区别(图4)

3.点击outer view时,输出结果:


bindtap和catchtap的区别(图5)

说明:由以上调试结果可以看到,bindtap为冒泡事件,点击组件事件时会向上传递,而catchtap为非冒泡事件,点击组件事件时不会向上传递。

文章由鸿邑科技成都网站建设编辑整理,转载请注明出处!

0
分享至: