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

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

如下图:

QQ20230113-162722@2x.png

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

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

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

当点击子集的catchtap=''事件之后阻止冒泡事件向上冒泡,所以不会触发bindtap='',成功解决bug,实现小程序中点击子元素事件而不触发父元素的点击事件。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容