微信小程序bindtap 与 catchtap 是使用

微信小程序bindtap 与 catchtap 是使用如果写小程序对二者不理解的 那看到这边博客 将很快帮助到您 个人总结的一句话 bindtap 点击事件在同一个 view 中会向上冒泡 而 catchtap 不会向上冒泡下面会有一个 demo 给出解释 说他们使用的时候先说下微信小程序的事件分类冒泡事件与非冒泡事件官网上这样规定的事件分类事件分为冒泡事件和非冒泡事件 冒泡事件 当一个组件上的事件被触发后 该事件会向父节点传递

如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您,

个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡

下面会有一个demo给出解释,

说他们使用的时候先说下微信小程序的事件分类冒泡事件与非冒泡事件

官网上这样规定的

事件分类

事件分为冒泡事件和非冒泡事件:

  1. 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

先写一个demo

outer view

middle view

inner view

inner view1

 

给没一个view设置一个bindtap  

在js中打印点击事件

handleTap1:function(){

console.log(“=============hly”,”handleTap1″)

},

 

handleTap2: function () {

console.log(“=============hly”, “handleTap2”)

},

 

handleTap3: function () {

console.log(“=============hly”, “handleTap3”)

},

 

handleTap4: function () {

console.log(“=============hly”, “handleTap4”)

},

 

点击inner view1 的时候看下打印

微信小程序bindtap 与 catchtap 是使用

点击inner view的时候再看下打印

微信小程序bindtap 与 catchtap 是使用

点击middle view的时候在此看下打印

微信小程序bindtap 与 catchtap 是使用

也就是说点击的时候它把最外面的几个也打印了 也是冒泡到其他事件,当然这个时候就是想阻止它了

这个时候点击事件就可以设置catchtab了,

现在把第三个设置catchtap

微信小程序bindtap 与 catchtap 是使用

点击innerview1的时候再看下打印

微信小程序bindtap 与 catchtap 是使用

变成了2个,也就是tap3阻止了其向上冒泡, 当然如果把第四个设置catchtap的话 其也会起到阻止的作用,

至此可以发现,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/211810.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 下午9:33
下一篇 2026年3月18日 下午9:33


相关推荐

  • JAVA通过FDFS上传以及加载文件原理简析

    JAVA通过FDFS上传以及加载文件原理简析初学者的总结 仅是简单案例如果我们想在 java 后台中将图片上传到 linux 下的 FDFS 分布式系统中 首先通过 VMware 虚拟机安装 linux 系统 进入系统后 需要安装以下服务 tracker storage client nginx 这几个服务首先说说他们的基本工作原理 客户端发送请求 将文件通过 fdfs 插件上传 因为 tracker 不支持 http 协议 客户端不能通过 HTTP 直接访问 需要

    2026年3月26日
    2
  • 在linux后台运行脚本的方法和命令

    在linux后台运行脚本的方法和命令后台运行脚本执行脚本 test sh test sh 中断脚本 test sh ctrl c 在 1 的基础上将运行中的 test sh 切换到后台并暂停 ctrl z 执行 ctrl z 后 test sh 在后台是暂停状态 stopped 使用命令 bgnumber 让其在后台开始运行 number 是使用 jobs 命令查到的 中的数字 不是 pid 直接在后台运行脚本 test s

    2026年3月20日
    3
  • 基于指纹的原则,具体的音乐检索

    基于指纹的原则,具体的音乐检索

    2022年1月10日
    44
  • java observable_java primitive type

    java observable_java primitive typeSortedSet接口主要用于排序操作,即实现此接口的子类都属于排序的子类SortedSet接口定义:publicinterfaceSortedSet<E>extendsSet<E>该接口也继承了Set接口,定义了如下方法:importjava.util.SortedSet;importjava.util.TreeSet;public…

    2022年10月21日
    5
  • 第58章、拍照功能实现(从零开始学Android)

    第58章、拍照功能实现(从零开始学Android)Android有两种拍照方法,一种是直接调用系统的照相Intent,使用onActivityResult获取图片资源或者指定图片路径,拍照返回成功后去指定路径读取图片;一种是用SurfaceView自定义界面,添加业务个性化功能。一、第一种方法1、设计界面  (1)、布局文件  打开activity_main.xml文件。  输入以下代码: 

    2022年6月18日
    30
  • linux创建新账号命令,linux创建用户命令

    linux创建新账号命令,linux创建用户命令创建用户 设置密码 修改用户 删除用户 useraddtestu 创建用户 testuserpass 给已创建的用户 testuser 设置密码说明 新创建的用户会在 home 下创建一个用户目录 testuseruser 修改用户这个命令的相关参数 userdeltestu 删除用户 testuserrm rftestuser 删除用户 testus

    2026年3月16日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号