微信小程序之点击事件

server/2025/1/15 21:50:09/

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

相关文章

建立时间/保持时间为负是什么情况

目录 建立时间为负保持时间为负参考 在说明建立时间和保持时间为何为负的情况下&#xff0c;首先可以看看建立时间Tsu和保持时间Th的由来&#xff0c;可参考如下两篇文章&#xff1a; 建立时间和保持时间理解_为什么要满足建立时间和保持时间-CSDN博客 ic基础|时序篇&#xff…

微信小程序实现全局参数共享,且实现全局参数变化时的页面间通信

首先&#xff0c;微信小程序中并没有提供直接的全局事件系统来监听全局参数的变化。因此&#xff0c;我们需要采用其他方式来达到这一目的。一种常见的方法是使用全局变量和事件监听来模拟全局事件系统。 1. 定义全局变量和事件 在 app.js 中定义全局变量&#xff0c;并提供一…

【华为OD机试】跳马【C卷|200分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 马是象棋(包括中国象棋和国际象棋)中的棋子,走法是每步直一格再斜一格, 即先横着或者直者走一格,然后再斜着走一个对角线,可进可退,可越过河界,俗称"马走日"字。 给定 m…

最新在Fedora Linux安装MongoDB服务器的简单教程

本指南将帮助你在 Fedora 39/38/37/36 或您正在使用的任何其他版本上安装最新或旧版本的 MongoDB 数据库服务器。 MongoDB 是一种流行的 NoSQL 数据库服务器&#xff0c;提供社区版和企业版。它以其高性能、灵活性和可扩展性而闻名。它是一个无模式数据库&#xff0c;因此允许…

特殊文件java

properties 属性文件 里边存放 键值对键不能重复文件后缀一般是 properties 结尾的 使用properties读取属性文件 public class PropertiesTest1 {public static void main(String[] args) throws Exception {//1.创建一个properties对象Properties properties new Propertie…

网工-BGP协议全面学习笔记(待更新和完善...)

作者&#xff1a;BSXY_19计科_陈永跃 BSXY_信息学院 注&#xff1a;未经允许禁止转发任何内容 网工-BGP协议全面学习笔记 1、OSPF基础2、BGP报文3、BGP案例4、BGP属性待更新和完善... 1、OSPF基础 在EGP协议中&#xff0c;引入了AS(Autonomous System&#xff0c;自治系统)的概…

linux设置程序在开机时自启动

​常见的有三种方式&#xff1a;1、/etc/rc.local文件中添加自启动命令 对于某些没有使用systemd的Linux发行版&#xff0c;可以在/etc/rc.local文件中添加自启动命令。请确保该文件具有可执行权限。例如&#xff0c;在/etc/rc.local文件中添加以下内容&#xff1a; /…

使用go和消息队列优化投票功能

文章目录 1、优化方案与主要实现代码1.1、原系统的技术架构1.2、新系统的技术架构1.3、查看和投票接口实现1.4、数据入库MySQL协程实现1.5、路由配置1.6、启动程序入口实现 2、压测结果2.1、设置Jmeter线程组2.2、Jmeter聚合报告结果&#xff0c;支持11240/秒吞吐量2.3、Jmeter…