脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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基于setTimeout实现计数的方法

    JavaScript基于setTimeout实现计数的方法

    这篇文章主要介绍了JavaScript基于setTimeout实现计数的方法,涉及javascript中setTimeout方法的使用技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript中的偏函数你理解了吗

    JavaScript中的偏函数你理解了吗

    JavaScript中的偏函数（Partial Function）是指一个函数，它是由另一个函数通过固定一些参数而得到的，从而产生了一个新的函数，本文主要来和大家聊聊偏函数的原理与使用，希望对大家有所帮助
    2023-05-05
  • JavaScript获取flash对象与网上的有所不同

    JavaScript获取flash对象与网上的有所不同

    关于js获取flash对象，网上有非常多的例子，但不是我想要的，经测试整理，因此本文诞生了
    2014-04-04
  • 小程序中手机号识别的示例

    小程序中手机号识别的示例

    这篇文章主要介绍了小程序中手机号识别的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 微信小程序蓝牙连接小票打印机实例代码详解

    微信小程序蓝牙连接小票打印机实例代码详解

    这篇文章主要介绍了微信小程序蓝牙连接小票打印机实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 原生js实现随机点名

    原生js实现随机点名

    这篇文章主要为大家详细介绍了原生js实现随机点名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 详解JS面向对象编程

    详解JS面向对象编程

    这篇文章主要为大家介绍了js面向对象编程，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS实现多物体缓冲运动实例代码

    JS实现多物体缓冲运动实例代码

    这篇文章主要介绍了JS实现多物体缓冲运动实例代码，有需要的朋友可以参考一下
    2013-11-11
  • js中各种类型的变量在if条件中是true还是false

    js中各种类型的变量在if条件中是true还是false

    变量在if条件中到底是true还是false，还是比较让人迷糊，下面来进行测试，测试常见的变量类型在if条件中的表现
    2014-07-07
  • JavaScript获取图片真实大小代码实例

    JavaScript获取图片真实大小代码实例

    这篇文章主要介绍了JavaScript获取图片真实大小代码实例,本文使用onload事件来获取图片的真实大小,需要的朋友可以参考下
    2014-09-09

最新评论