微信小程序之点击事件

微信小程序中常用的点击事件主要是 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.hqwc.cn/news/630499.html

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

相关文章

使用Python工具库SnowNLP对评论数据标注(二)

这一次用pandas处理csv文件 comments.csv import pandas as pd from snownlp import SnowNLPdf pd.read_csv("C:\\Users\\zhour\\Documents\\comments.csv")#{a: [1, 2, 3], b: [4, 5, 6], c: [7, 8, 9]}是个字典 emotions[] for txt in df[sentence]:s SnowNLP(…

低噪声放大器是如何实现低噪声放大的功能的

灵敏度作为接收机最重要的指标之一,直接决定了接收机能分辨的最小信号。接收机的灵敏度计算公式如下所示。 Psensitivity=-174dBm+NF+10*lg(BW)+SNR 由接收机灵敏度的计算公式可知,影响接收机灵敏度的指标有噪声系数、带宽和信噪比,因此一旦带宽和信噪比确定了,那么能决…

计算机网络 -- 网络编程基础

一 学习准备 1.1 IP地址 在 前文中我们提到过: IP 是全球网络的基础&#xff0c;使用 IP 地址来标识公网环境下主机的唯一性&#xff0c;我们可以根据 目的IP地址 进行跨路由器的远端通信。 但是我们也提到了&#xff0c;通过 IP 地址&#xff0c;只能寻找到目标主机&#xff…

iOS 全平台矢量动画库:体积小巧、功能丰富 | 开源日报 No.227

airbnb/lottie-ios Stars: 24k License: NOASSERTION lottie-ios 是一个用于在 iOS 平台上本地渲染 After Effects 矢量动画的库。 该项目主要功能、关键特性、核心优势包括&#xff1a; 跨平台支持&#xff1a;可在 iOS, macOS, tvOS, visionOS, Android 和 Web 上使用实时渲…

ElasticSearch:基础操作

一、ES的概念及使用场景 ElasticSearch是一个分布式&#xff0c;高性能、高可用、可伸缩、RESTful 风格的搜索和数据分析引擎。通常作为Elastic Stack的核心来使用 我们通过将ES 和 mysql对比来更好的理解 ES&#xff0c;ES和mysql相关的基本概念的对比表格如下&#xff1a; …

查询服务器上所有SQL SERVER数据库中是否包含某个字段,且该字段是否包含某个值

公司有一堆相同类别的客户&#xff0c;每个客户都部署了相同的一套系统&#xff0c;每套系统对应一个相同结构的数据库&#xff0c;昨天老板让查一下手机号码177xxxxx248是属于哪个客户的客户。 我要查的这个号码来自于oa_member表中的phone字段&#xff0c;我需要对所有的数据…

基于Spring Boot+Vue的校园网上店铺,开启便捷购物新模式

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…

Java内存模型和 JVM 内存运行时

文章目录 前言一、什么是Java 的内存模型&#xff1f;二、什么是 JVM 的运行时数据区Java8 之前和之后的区别JVM 内存模型JVM 内存区域JVM 内存垃圾回收JVM如何判断哪些对象不在存活&#xff1f;JVM运行过程中如何判断哪些对象是垃圾&#xff1f; JVM 垃圾回收Java8 中的 jvm如…

leetcode刷题(python)——(四)

01.02.03 练习题目&#xff08;第 04 天&#xff09; 1. 0048. 旋转图像 1.1 题目大意 描述&#xff1a;给定一个 n n n \times n nn 大小的二维矩阵&#xff08;代表图像&#xff09; m a t r i x matrix matrix。 要求&#xff1a;将二维矩阵 m a t r i x matrix matr…

华为手机无法弹出wifi上网认证页面处理

华为手机无法弹出wifi上网认证页面 连wifi后跳到上图界面卡住&#xff0c;不跳转到单位的上网认证界面。 打开手机的设置应用&#xff0c;点击上面的WLAN选项。 点击上面的更多WLAN设置选项。 关闭WLAN安全检测就可以正常弹出上网认证界面&#xff0c; 正常弹出上网认证界面&a…

OpenGL:图元

OpenGL的图元 点 GL_POINTS&#xff1a; 将顶点绘制成单个的点 线 GL_LINES&#xff1a;将顶点用于创建线段&#xff0c;2个点成为一条单独的线段。如果顶点个数是奇数&#xff0c;则忽略最后一个。 顶点&#xff1a;v0, v1, v2, v3, … , vn&#xff0c;线段&#xff1a;…

# 从浅入深 学习 SpringCloud 微服务架构(一)基础知识

从浅入深 学习 SpringCloud 微服务架构&#xff08;一&#xff09;基础知识 1、系统架构演变&#xff1a; 1&#xff09;单体应用架构。如电商项目。 用户管理、商品管理、订单管理&#xff0c;在一个模块里。 优点&#xff1a;开发简单&#xff0c;快速&#xff0c;适用于…