脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uniapp @click事件冒泡

uniapp @click事件冒泡问题解决示例

 更新时间：2023年07月10日 14:14:24   作者：小李不小  
这篇文章主要为大家介绍了uniapp @click事件冒泡问题解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

维护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事件冒泡的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JavaScript中Array.from()的超全用法详解

    JavaScript中Array.from()的超全用法详解

    Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map），别忘记就来讲讲他的具体用法吧
    2023-03-03
  • JS日期对象简单操作（获取当前年份、星期、时间）

    JS日期对象简单操作（获取当前年份、星期、时间）

    这篇文章主要介绍了JS日期对象简单操作,获取当前年份、星期、时间等代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • javascript实现简易聊天室

    javascript实现简易聊天室

    这篇文章主要为大家详细介绍了javascript实现简易聊天室，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JavaScript异步编程之Async/Await用法完全指南

    JavaScript异步编程之Async/Await用法完全指南

    async/await是JavaScript中基于Promise的异步语法糖,使异步代码更直观易读,这篇文章主要介绍了JavaScript异步编程之Async/Await用法完全指南的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2026-01-01
  • JavaScript实现放大镜效果代码示例

    JavaScript实现放大镜效果代码示例

    这篇文章主要介绍了JavaScript实现放大镜效果代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • JavaScript汉诺塔问题解决方法

    JavaScript汉诺塔问题解决方法

    这篇文章主要介绍了JavaScript汉诺塔问题解决方法,涉及javascript递归调用操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript中setTimeout使用重要的注意事项总结

    JavaScript中setTimeout使用重要的注意事项总结

    setTimeout用于延迟执行函数,异步特性使其不阻塞代码,这篇文章主要介绍了JavaScript中setTimeout使用注意事项的相关资料,需注意作用域绑定、参数传递、取消定时器及精确度问题,需要的朋友可以参考下
    2025-05-05
  • JS中的数组的some()方法示例解析

    JS中的数组的some()方法示例解析

    some()方法用于检测数组中的元素是否满足指定条件函数提供,这篇文章主要介绍了JS中的数组的some()方法示例解析,需要的朋友可以参考下
    2025-04-04
  • JS中promise特点与信任问题解决

    JS中promise特点与信任问题解决

    大家都知道Promise解决了回调地狱的问题,“回调地狱”所说的嵌套其实是指异步的嵌套,它带来了两个问题:可读性的问题和信任问题,下面这篇文章主要给大家介绍了关于JS中promise特点与信任问题解决的相关资料,需要的朋友可以参考下
    2022-06-06
  • 微信小程序激励式视频广告组件使用详解

    微信小程序激励式视频广告组件使用详解

    这篇文章主要介绍了微信小程序激励式视频广告组件使用，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12

最新评论