如何解决uniapp中@click事件冒泡导致的子组件点击问题？

本文共计467个文字，预计阅读时间需要2分钟。

目录 + 正文 + 示例 + 解析 + 正文 + 维护在使用uniapp项目维护时，遇到点击mywitch2后触发事件冒泡问题，解决方法如下：- 直接在max-box的父元素上添加 @tap.stop.prevent 即可解决；- 示例：`view @tap.stop.prevent`

目录

• 正文
• 示例
• 解析

正文

维护uniapp项目时，遇到了点击mywitch2后触发事件冒泡，然后百度了一大堆 发现大家讲的都是 ：直接在max-box的父元素上加 @tap.stop.prevent 即可解决；

示例

<view @click="mywitch1"> 　　<view class="max-box" @tap.stop.prevent> 　　　　　　<!-- switch --> 　　　 　　<view @click.stop="mywitch2"></view> 　　</view> </view>

如：

<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background, font-size, border-color, border-radius, border-width, padding, margin, color; overflow: auto; font-family: &quot;Courier New&quot;, serif; font-size: 12px; overflow-wrap: break-word;"><view> 　　<view class="max-box" @tap.stop.prevent> 　　　　　　<!-- switch --> 　　　 　　<view @change.stop="mywitch"></view> 　　</view> </view></pre>

解析

如果父容器存在点击事件时，父容器是@click.stop或者是@click.native.stop仍会不能阻止view组件的冒泡

需要了解@tap和@click的区别，然后直接使用 @tap.stop 即可阻止Switch中的事件冒泡

• @click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）；
• @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透;

编译到小程序端，@click会被转换成@tap；

<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background, font-size, border-color, border-radius, border-width, padding, margin, color; overflow: auto; font-family: &quot;Courier New&quot;, serif; font-size: 12px; overflow-wrap: break-word;"><view class="max-box" @tap.stop="waimian"> 　　<view @tap.stop="mywitch"></view> </view></pre>

以上就是uniapp @click事件冒泡问题解决示例的详细内容，更多关于uniapp @click事件冒泡的资料请关注自由互联其它相关文章！