微信小程序bind和catch区别_小程序游戏app

小程序 (1) 2024-08-26 10:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
微信小程序bind和catch区别_小程序游戏app,希望能够帮助你!!!。

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

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

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

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

举一个例子说明:

wxml部分:

微信小程序bind和catch区别_小程序游戏app_https://bianchenghao6.com/blog_小程序_第1张

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

.js部分:

微信小程序bind和catch区别_小程序游戏app_https://bianchenghao6.com/blog_小程序_第2张

调试结果:

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

 

微信小程序bind和catch区别_小程序游戏app_https://bianchenghao6.com/blog_小程序_第3张

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

 

微信小程序bind和catch区别_小程序游戏app_https://bianchenghao6.com/blog_小程序_第4张

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

 

微信小程序bind和catch区别_小程序游戏app_https://bianchenghao6.com/blog_小程序_第5张

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

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

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

发表回复