微信小程序之点击事件

news2024/12/23 9:15:39

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

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

相关文章

浅析binance新币OMNI的前世今生

大盘跌跌不休&#xff0c;近期唯一的指望就是binance即将上线的OMNI 。虽然目前查到的空投数量不及预期&#xff0c;但OMNI能首发币安&#xff0c;确实远超预期了。 OMNI代币总量1亿&#xff0c;初始流通仅10,391,492枚&#xff0c;其中币安Lanchpool可挖350万枚 对于OMNI这个…

【做算法学数据结构】【链表】删除排序链表中的重复元素

链表 链表单向链表双向链表 题目代码 链表 当涉及到数据结构时&#xff0c;链表是一种常见且重要的数据结构。链表由一系列节点组成&#xff0c;每个节点包含数据和指向下一个节点的引用。相比于数组&#xff0c;链表的大小可以动态地增长或缩小&#xff0c;因为每个节点只需要…

风力发电自动化控制系统中的智能化技术应用研究

风力发电自动化控制系统中的智能化技术应用研究 随碳中和目标的提出和执行&#xff0c;风能发电作为新能源行业的核心部分&#xff0c;步入了它的黄金发展期。由于风能资源具有间歇性、随机性等特点&#xff0c;这给风电的高效利用带来了巨大挑战。为了增强风力发电系统的工作效…

枚举类型介绍

1.如果一个变量只有几种可能的值&#xff0c;比如星期几 son,mon,tus,wed,fri,sat 列表中的名字&#xff0c;可以自己定义&#xff0c;无需像变量一样去申请 枚举变量&#xff1a;只限列表中的情况&#xff0c;值默认从0开始&#xff0c;枚举元素不能被赋值&#xff0c;可以指定…

OpenCV从入门到精通实战(七)——探索图像处理:自定义滤波与OpenCV卷积核

本文主要介绍如何使用Python和OpenCV库通过卷积操作来应用不同的图像滤波效果。主要分为几个步骤&#xff1a;图像的读取与处理、自定义卷积函数的实现、不同卷积核的应用&#xff0c;以及结果的展示。 卷积 在图像处理中&#xff0c;卷积是一种重要的操作&#xff0c;它通过…

JAVA网络编程、项目验证码实现

什么是网络编程? 在网络通信协议下&#xff0c;不同计算机上运行的程序&#xff0c;进行的数据传输。 应用场景&#xff1a;即时通信、网游对战、金融证券、国际贸易、邮件、等等 不管是什么场景&#xff0c;都是计算机跟计算机之间通过网络进行数据传输 Java中可以使用ja…

面试经典算法系列之二叉树17 -- 验证二叉树

面试经典算法32 - 验证二叉树 LeetCode.98 公众号&#xff1a;阿Q技术站 问题描述 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当…

浅写个登录(无js文件)

全部代码如下&#xff0c;无需编写wxss文件&#xff0c;渲染都在style里面&#xff1a; <view style"height: 250rpx;width: 100%;"> <!-- 背景图片 --><view style"position: absolute; background-color: antiquewhite; height: 250rpx;width…

OpenHarmony UI动画-recyclerview_animators

简介 带有添加删除动画效果以及整体动画效果的list组件库 下载安装 ohpm install ohos/recyclerview-animatorsOpenHarmony ohpm 环境配置等更多内容&#xff0c;请参考如何安装OpenHarmony ohpm 包 使用说明 引入组件库 import { RecyclerView } from "ohos/recycler…

RabbitMQ项目实战(一)

文章目录 RabbitMQ项目实战选择客户端基础实战 前情提要&#xff1a;我们了解了消息队列&#xff0c;RabbitMQ的入门&#xff0c;交换机&#xff0c;以及核心特性等知识&#xff0c;现在终于来到了激动人心的项目实战环节&#xff01;本小节主要介绍通过Spring Boot RabbitMQ S…

UI5 快速入门教程

环境准备 node >16.8 ,VSCode&#xff0c;官方网址 开始 创建一个根文件夹&#xff0c;根文件中创建一个package.json文件 {"name": "quickstart-tutorial","private": true,"version": "1.0.0","author":…

吴恩达<用于LLM应用程序开发的LangChain> L1-Model_prompt_parser

问题预览/关键词 课程地址如何获取openAI的API Key如何根据日期设置不同模型?如何调用OpenAI的API?如何使用OpenAI的API&#xff1f;langchain如何抽象OpenAI的API接口&#xff1f;langchain如何创建提示词模板并查看模板内容&#xff1f;langchain如何使用提示词模板生成提…

【opencv】dnn示例-vit_tracker.cpp 使用OpenCV库和ViTTrack模型实现的视频追踪程序

这段代码是一个使用OpenCV库和ViTTrack模型实现的视频追踪程序。程序通过摄像头或视频文件获取图像序列&#xff0c;并对选定的目标对象进行实时追踪。 代码主要分为以下几个部分&#xff1a; 导入必要的库&#xff1a;程序开始时先导入了iostream&#xff0c;cmath以及相关Ope…

每日两题 / 53. 最大子数组和 56. 合并区间(LeetCode热题100)

53. 最大子数组和 - 力扣&#xff08;LeetCode&#xff09; 经典dp题&#xff0c;dp[i]表示以nums[i]为结尾的所有子数组中&#xff0c;最大的和 将i从左到右遍历&#xff0c;考虑dp[i]如何维护&#xff1f; 以nums[i]结尾的子数组只有两种情况&#xff0c;子数组只有nums[i]…

[Qt网络编程]之UDP通讯的简单编程实现

hello&#xff01;欢迎大家来到我的Qt学习系列之网络编程之UDP通讯的简单编程实现。希望这篇文章能对你有所帮助&#xff01;&#xff01;&#xff01; 本篇文章的相关知识请看我的上篇文章: http://t.csdnimg.cn/UKyeM 目录 UDP通讯 基于主窗口的实现 基于线程的实现 UDP通讯…

小黄脸404自动跳转源码

源码介绍 小黄脸404自动跳转源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 效果截图 源码下载 小黄脸404自动跳转…

网络防火墙技术知多少?了解如何保护您的网络安全

在当前以网络为核心的世界中&#xff0c;网络安全成为了至关重要的议题。网络防火墙是一种常见的保护网络安全的技术&#xff0c;用于监控和控制网络流量&#xff0c;阻止未经授权的访问和恶意活动。今天德迅云安全就带您了解下防火墙的一些相关功能和类型。 防火墙的五个功能…

【EI会议征稿通知】2024年图像处理、机器学习与模式识别国际学术会议(IPMLP 2024)

2024年图像处理、机器学习与模式识别国际学术会议&#xff08;IPMLP 2024) 2024 International Conference on Image Processing, Machine Learning and Pattern Recognition 重要信息 大会官网&#xff1a;www.ipmlp.net&#xff08;点击参会/投稿/了解会议详情&#xff09;…

【操作系统】(Operator System)

目录 1.概念2.系统调用和库函数 1.概念 1.操作系统是什么呢&#xff1f;&#xff1f; 操作系统是一款进行软硬件资源管理的软件&#xff0c;我们打开电脑第一个加载的软件就是操作系统。 2.为什么要有操作系统呢&#xff1f; 操作系统通过将软硬件资源管理好(手段)&#xf…

axios的封装理解和基本使用

axios的配置 ruoyi的前端对axios进行了封装&#xff0c;让我们发get请求或者是post请求更加方便了。 ruoyi对axios的封装在下面文件中&#xff1a;打开文件&#xff0c;可以看到它有三个显眼的方法&#xff0c;分别是request拦截器、response拦截器和通用下载方法。ruoYi接口地…