小程序bindtap和catchtap 例子展示

it2026-06-07  1

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

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

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

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

举一个例子说明:

wxml部分:

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

.js部分:

调试结果:

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

 

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

 

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

 

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

作者:Sylvia_wuu 链接:https://www.jianshu.com/p/7620b1d1ba82 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

最新回复(0)