首页 > 编程语言 >【快应用】小程序转快应用如何阻止事件向上冒泡

【快应用】小程序转快应用如何阻止事件向上冒泡

时间:2022-11-17 09:24:23浏览次数:62  
标签:触发 转快 点击 事件 应用 冒泡

 问题背景:

小程序转快应用,在快应用中使用view标签包裹两层,在每层都写了一个点击事件,在点击最里面的一个button按钮的时候会触发所有view标签上绑定的点击事件,该如何处理才能只触发一个button按钮的事件呢?

相关代码:

<view class="container" bindtap="handleTap1">

  <view class="loginstyle" bindtap="handleTap2">

    <button class="btn" bindtap="handleTap3">测试</button>

  </view>

</view>

截图:

cke_2153.png

 

原因及解决方案:

bind 事件绑定不会阻止冒泡事件向上冒泡,所以在点击最里面的一个层级后,会触发所有的事件,要想只触发对应的事件可以使用catch事件绑定来阻止向上冒泡。

相关代码:

<view class="container" bindtap="handleTap1">

  <view class="loginstyle" bindtap="handleTap2">

    <button class="btn" catchtap="handleTap3">测试</button>

  </view>

</view>

截图:

cke_4587.png

​欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

标签:触发,转快,点击,事件,应用,冒泡
From: https://www.cnblogs.com/developer-huawei/p/16898295.html

相关文章

  • WPF应用程序(.NET Core)
    WPF应用程序(.NETCore)https://www.cnblogs.com/ZhuMeng-Chao/p/16410852.htmlhttps://www.cnblogs.com/ZhuMeng-Chao/category/2182960.html......
  • 【重识云原生】第四章云网络4.3.10.6节——VXLAN应用部署方案
      《重识云原生系列》专题索引: 第一章——不谋全局不足以谋一域第二章计算第1节——计算虚拟化技术总述第三章云存储第1节——分布式云存储总述第四章云网络第一节—......
  • 移动应用的手动测试策略
    质量分析师的工作绝非易事。开发人员通常不喜欢他们,没有人喜欢代码中错误被拿出来公开。但是QA的工作在软件开发生命周期中非常有趣且非常重要。尤其是在当前的数字化转型......
  • MongoDB搭建与应用
    一、单机搭建1、安装与启动#1.下载社区版MongoDB4.1.3#下载地址:https://www.mongodb.com/download-center#communitywgethttps://fastdl.mongodb.org/linux/mon......
  • 传输层之TCP与UDP协议、应用层、socket模块、socket代码简介、半连接池的概念
    传输层之TCP与UDP协议TCP与UDP都是用来规定通信方式的 通信的时候可以随心所欲的聊也可以遵循一些协议符合要求的聊 随性所欲的聊:文字图片视频小油腻话你侬我侬......
  • 数组~冒泡法排序
    题目描述用冒泡法对10个整数从小到大排序。输入10个整数输出排序好的10个整数样例输入4853234453453451223012样例输出341230458512223434......
  • OSI传输层TCP与UDP协议、应用层简介、socket模块介绍及代码优化、半连接池的概念
    目录传输层之TCP与UDP协议应用层socket模块socket基本使用代码优化半连接池的概念传输层之TCP与UDP协议TCP与UDP都是用来规定通信方式的通信的时候可以随心所欲的聊......
  • 冒泡排序
    冒泡排序冒泡排序无疑是最为出名的排序算法之一,总共有八大排序!冒泡的代码还是相当简单的,两层循环,外层冒泡轮数,里层依次比较,江湖中人人尽皆知。我们看到嵌套循环,......
  • 电脑应用小技巧
    查看电脑磁盘类型windows+R打开命令控制窗口输入cmd,并输入diskpart......
  • Anaconda安装教程与pycharm应用
    下载地址分享一下安装Anaconda的过程。这里博主没有去官网下载,而是去清华镜像网站下载的在这里插入代码片安装步骤这里一路绿灯即可第一项AddAnaconda是将安装路径自动......