![[可怜]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_5.ece2a96.png)
![[衰]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_34.cf5b4d5.png)
wx小程序：bindtap和catchtap的区别![[惊讶]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_68.1e326db.png)
个人认为，最主要的还是冒泡机制的区别：
bindtap绑定的事件会按照冒泡机制进行传递，从触发事件元素向上层元素冒泡传递，而catchtap绑定的事件不会进行冒泡传递，只在当前触发事件元素上有效。
说人话就是：你设想一个场景，点击卡片会跳转到商品详情页，同时卡片上还有一个按钮，点击会加入购物车。此时，如果我们的按钮用bindtap来写的话，点击加入购物车的同时也会触发卡片的跳转事件，所以如果你只想加入购物车，不想跳转详情页可以选择用catchtap代替bindtap
同理，uniapp中的@tap和@catchtap也是类似的。![[吐舌]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_95.6b0752f.png)
![[惊讶]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_68.1e326db.png)
个人认为，最主要的还是冒泡机制的区别：
bindtap绑定的事件会按照冒泡机制进行传递，从触发事件元素向上层元素冒泡传递，而catchtap绑定的事件不会进行冒泡传递，只在当前触发事件元素上有效。
说人话就是：你设想一个场景，点击卡片会跳转到商品详情页，同时卡片上还有一个按钮，点击会加入购物车。此时，如果我们的按钮用bindtap来写的话，点击加入购物车的同时也会触发卡片的跳转事件，所以如果你只想加入购物车，不想跳转详情页可以选择用catchtap代替bindtap
同理，uniapp中的@tap和@catchtap也是类似的。
![[吐舌]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_95.6b0752f.png)
展开
1
3