当子元素和父元素都有点击事件时，点击子元素事件的时候会触发父元素的点击事件，从而执行父级的点击事件，跳转到了父级的点击事件的页面了，怎么解决这个问题呢？
如下图：
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,实现小程序中点击子元素事件而不触发父元素的点击事件。
在测试小程序的时候，发现了这样的一个bug，点击子元素事件d的时候触发父元素的点击事件，从而执行父级的点击事件，跳...
在测试小程序的时候，发现了这样的一个bug，点击子元素事件d的时候触发父元素的点击事件，从而执行父级的点击事件，跳...
测试代码 效果如图 当我们点击子元素(黄色区域)时会先触发子元素的点击事件，然后会继续触发父元素的点击事件，阻止冒...
原理：bind事件绑定不会阻止冒泡事件向上冒泡catch事件绑定可以阻止冒泡事件向上冒泡 当点击子元素的catch...
事件委托，主要思想是： 给父级元素定义一个事件（比如 onclick 点击事件）。 父级元素触发这个事件后，就会命...
一、事件概述 事件三要素：事件源:触发(被)事件的元素事件类型:事件的触发方式(例如鼠标点击或键盘点击)事件处理程...
不使用修饰符情况 执行结果：点击了子元素；点击了父元素 stop - 阻止事件冒泡 执行结果：点击了子元素（未触发...
注：父元素和子元素都有click事件绑定，当点击子元素，希望执行子元素的事件而不执行父元素事件，在子元素事件开始时...
嵌套的div元素，如果父级和子元素都绑定了一些事件，那么在点击最内层子元素时可能会触发父级元素的事件，下面介...
Vue 语法中使用的 注意事项 在DOM中 可能存在 点击触发子元素事件，父元素事件也跟着响应了 （这叫...
本文标题：小程序中子元素点击事件不触发父元素的点击事件处理
本文链接：https://www.haomeiwen.com/subject/bzrwcdtx.html
网友评论