微信小程序之点击事件

微信小程序中常用的点击事件主要是 tap,但除此之外还有其他的触摸类事件,用于不同的交互场景。以下是一些常见的点击和触摸相关的事件及其区别:

1、tap——最基本的点击事件,适用于一般的轻触交互,类似于 HTML 中的 click 事件。

<view onTap="handleTap">点击我</view>
Page({handleTap: function(e) {console.log('tap事件触发');}
})

2、bindtap——类似于 onTap,是另一种声明点击事件的方式,属于数据绑定语法,也是最常见的绑定事件的方式。

<button bindtap="buttonClicked">点击按钮</button>
Page({buttonClicked: function(e) {console.log('按钮被点击');}
})

3、catchtap——有时候为了阻止事件冒泡,会使用 catchtap 事件,它在触发后会阻止后续的 tap 事件继续向上冒泡。

3.1.冒泡事件:

冒泡(Bubble)是一种事件传播机制,在Web开发领域和微信小程序中广泛存在。当用户在一个页面元素上触发一个事件(比如点击事件),这个事件不仅仅在这个元素上执行相应的处理函数,还会按照DOM树的层次结构,由内向外逐级向上级元素传播这个事件,直到顶层元素或者被明确阻止传播为止。这个事件从子元素向父元素逐层传递的过程就像气泡从水底升到水面一样,因此得名“事件冒泡”。

在微信小程序中,事件冒泡的概念同样适用。当你在一个嵌套结构的组件中绑定事件时,如果子组件和父组件都绑定了同一类型的事件,那么当子组件触发事件时,首先会在子组件上调用事件处理函数,接着事件会沿组件层级向上冒泡,依次触发父组件上同类型的事件处理函数。这有助于简化事件处理逻辑,因为在父组件中可以集中处理多个子组件触发的相同事件。

<view id="parent"><view id="child" bindtap="childTap">点击我</view>
</view>
Page({childTap: function(event) {console.log('子组件的点击事件被触发');},parentTap: function(event) {console.log('父组件的点击事件被触发');}
});

这时候点击子组件会发现控制台输出:

因为当点击子组件时,会先执行childTap函数,然后事件冒泡到父组件并执行parentTap函数。如果你不希望事件冒泡,可以使用catchtap来阻止事件的进一步冒泡。

4、longtap、touchstart、 touchmovetouchend

  • longtap长按事件,当用户长按某个元素超过一定时间后触发。
  • touchstart、 touchmove、touchend触摸相关事件,分别对应手指触摸屏幕开始、移动和离开屏幕的过程。
  • 用于实现拖拽、滑动等更复杂的交互行为

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/595.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tomcat项目部署mysql报错3065

报错&#xff1a; ### SQL: SELECT DISTINCT ct.serial_no AS serial_no FROM xzfy_case_table AS ct WHERE ct.case_status ! ? AND ct.registrant_id ? ORDER BY application_date DESC LIMIT ?, ? ### Cause: java.sql.SQLException: Expression #1 of ORDER BY clause…

每日一练 | 华为认证真题练习Day218

1、IGMPv3不仅支持IGMPv1版本的普遍组查询和IGMPv2版本的特定组查询&#xff0c;还支持IGMPv3版本的指定源/组查询。 A. 对 B. 错 2、关于BGP中network命令的描述&#xff0c;错误的是&#xff1a; A. 通过network注入的路由必须存在于IP路由表中。 B. 注入的路由需要严格匹…

[渗透测试学习] Pov-HackTheBox

Pov-HackTheBox 信息搜集 nmap -sV -sC -v --min-rate 1000 10.10.11.251扫描结果 PORT STATE SERVICE VERSION 80/tcp open tcpwrapped |_http-title: pov.htb | http-methods: |_ Supported Methods: GET HEAD我们将域名pov.htb添加到/etc/hosts方便访问 打开后发…

Octopus+: An RDMA-Enabled Distributed Persistent Memory File System——泛读笔记

TOS 2021 Paper 分布式元数据论文阅读笔记整理 问题 非易失性存储器&#xff08;NVM&#xff09;和远程直接存储器访问&#xff08;RDMA&#xff09;在存储和网络硬件中提供了极高的性能。然而&#xff0c;现有的分布式文件系统隔离了文件系统和网络层&#xff0c;而且分层的…

Python 编程必备技能:解包。简化代码,提高效率

在 Python 中&#xff0c;解包&#xff08;Unpacking&#xff09;是指将一个序列&#xff08;列表、元组等&#xff09;或字典中的元素解开&#xff0c;分别赋值给多个变量的过程。解包可以方便地将序列或字典中的元素分别取出来&#xff0c;用于后续的处理和操作。 在 Python…

Nextjs学习入门 - 创建第一个项目

1 通过npx创建一个nextjs项目 通过命令创建&#xff1a; npx create-next-applatest 得到如下项目结构图&#xff1a; my-app- src //源代码目录- app //引用目录- favicon.ico //网站图标- globals.css //全局css- layout.tsx //布局文件- page.tsx //页面 路径"…

AntD上传文件 结合Axios 服务端由Spring MVC接收

以下将演示&#xff1a;如何使用AntD的上传组件&#xff0c;结合axios工具&#xff0c;向Spring MVC服务端上传文件。 前端发送 基于AntD的上传组件&#xff0c;采用手工上传模式&#xff1b;上传的同时&#xff0c;附加了一个category参数&#xff1b; const [category, setC…

Scikit-Learn 支持向量机分类

Scikit-Learn 支持向量机分类 1、支持向量机&#xff08;SVM&#xff09;1.1、SVM概述1.2、SVM原理1.3、SVM的损失函数 1、支持向量机&#xff08;SVM&#xff09; 1.1、SVM概述 在机器学习中&#xff0c;支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#x…

华为服务Fellow、首席项目管理专家,华为H5M项目管理标准制定主导者孙虎受邀为PMO大会演讲嘉宾

全国PMO专业人士年度盛会 华为服务Fellow、首席项目管理专家&#xff0c;华为H5M项目管理标准制定主导者孙虎先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“落地项目管理标准&#xff0c;打赢班长的战争”。大会将于5月25-26日在北京举办&am…

国民经济行业导入数据库码表

目录 1、先去下载word文档图片如下 2、粘贴到excel中形成insert 语句 3、创建临时表存excel中数据 4、创建码表保存信息 5、编写存储过程放入表中 5.1存储第四级码值及父机构 5.2存储第三级码值及父机构 5.3存储第二级码值及父机构 5.4存储第一级码值 6、导入成功查看…

react 使用WEB3.0控件开发包 V3.0接入海康威视摄像头

1、下载官方安装包&#xff1a; 2、安装官方插件 3、引入文件 在public/index 中引入监控依赖&#xff0c;这三个文件可以在下载的官方demo中找到 4、react 中使用 useEffect(() > { const ipInfo :[192.168.xxxx];//初始化摄像头const WebVideoCtrl window.WebVideoCtrl…

Linux下kafka单机版搭建

1.zookeeper的安装 这里使用3.6.4版本 前提&#xff1a;服务器已经安装了jdk&#xff0c;zookeeper运行需要jdk环境 1.1创建放zookeeper的目录 #创建目录 mkdir -p /usr/local/zookeeper#赋予权限 chmod 777 /usr/local/zookeeper1.2安装包的下载 #这里推荐去官网下载 https:…

泛型的初步认识(1)

前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; hellohello~&#xff0c;大家好&#x1f495;&#x1f495;&#xff0c;这里是E绵绵呀✋✋ &#xff0c;如果觉得这篇文章还不错的话还请点赞❤️❤️收藏&#x1f49e; &#x1f49e; 关注&#x1f4a5;&#x…

K8S面试题学习

参考K8S面试题&#xff08;史上最全 持续更新&#xff09;_kubernetes常见面试题-CSDN博客做的个人总结&#xff0c;规划是每天看10题&#xff0c;thx&#xff01; 1.K8S是什么&#xff1f; 容器编排工具&#xff0c;主要用来管理容器化的一个应用&#xff0c;可以管理容器全…

Java 算法篇-深入了解 BF 与 KMP 算法

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 BF 算法概述 1.1 BF 算法实际使用 2.0 KMP 算法概述 2.1 KMP 算法实际使用 2.2 相比于 BF 算法实现&#xff0c;KMP 算法的重要思想 2.3 为什么要这样设计&#x…

listpack

目录 为什么有listpack? listpack结构 listpack的节点entry 长度length encoding编码方式 listpack的API 1.创建listpack 2.遍历操作 正向遍历 反向遍历 3.查找元素 4.插入/替换/删除元素 总结 为什么有listpack? ziplist是存储在连续内存空间&#xff0c;节省…

华为云服务镜像手动更换

操作步骤&#xff1a; 1、进入华为云首页点击云容器引擎CCE&#xff1b; 2、选择你所要更换镜像的环境【这里以dev环境演示】&#xff1b; 3、点击dev环境后选择顶部的命名空间&#xff0c;点击【工作负载】中右侧栏的【升级】按钮&#xff1b; 4、点【更换镜像】选择你在test…

华为OD-C卷-测试用例执行计划[100分]Python3-100%

题目描述 某个产品当前迭代周期内有 N 个特性(F1,F2,......FN)需要进行覆盖测试,每个特性都被评估了对应的优先级,特性使用其 ID 作为下标进行标识。 设计了 M 个测试用例(T1,T2,......,TM),每个测试用例对应一个覆盖特性的集合,测试用例使用其 ID 作为下标进行标识,…

C++之类和对象三

目录 拷贝构造函数 定义铺垫 浅拷贝 深拷贝 总结 拷贝构造函数 那在创建对象时&#xff0c;可否创建一个与一个对象一某一样的新对象呢&#xff1f; 定义铺垫 构造函数&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c…

第十五届蓝桥杯大赛软件赛省赛(Java 大学B组)

蓝桥杯 2024年省赛真题 Java 大学B组 试题 A: 报数游戏试题 B: 类斐波那契循环数试题 C: 分布式队列 在找工作&#xff0c;随便写写&#xff0c;安定下来再把去年国赛题解补上 试题 A: 报数游戏 本题总分&#xff1a; 5 5 5 分 【问题描述】 小蓝和朋友们在玩一个报数游戏。由…