目录
- 正文
- 示例
- 解析
正文
维护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: "Courier New", 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: "Courier New", 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事件冒泡的资料请关注悠久资源网其它相关文章！
您可能感兴趣的文章:
- uniapp界面新增水印实现示例详解
- uniapp解决软键盘弹出问题方法详解
- uniapp获取手机通知权限实现demo
- uniapp路由uni-simple-router使用示例
- uniappmovable-area应用
