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

2023-01-12  本文已影响0人  陈大帅

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

如下图:

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,实现小程序中点击子元素事件而不触发父元素的点击事件。

上一篇下一篇

猜你喜欢

热点阅读