小程序中子元素点击事件不触发父元素的点击事件处理

sinat_39670720

已于 2023-07-25 15:12:54 修改

阅读量1k

点赞数 6

CC 4.0 BY-SA版权

文章标签：小程序 javascript 前端

于 2023-07-25 15:12:39 首次发布

本文链接：https://blog.csdn.net/sinat_39670720/article/details/131918539

当子元素和父元素都绑定了点击事件时，点击子元素会触发父元素的事件。为了解决这个问题，可以将子元素的bindtap事件改为catchtap，因为catchtap可以阻止事件冒泡，确保只有子元素的事件被触发，而不会影响到父元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当子元素和父元素都有点击事件时，点击子元素事件的时候会触发父元素的点击事件，从而执行父级的点击事件，跳转到了父级的点击事件的页面了，怎么解决这个问题呢？

如下图：

只需要把子级的bindtap改成catchtap，就可以了

<navigator  wx:for="{{goodsList}}" wx:key="gIdx" url="******">
     <image src="*****" mode="heightFix" catchtap="onClickAddCart" data-index="{{gIdx}}"/>
</navigator>

因为：
bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡