微信小程序之点击事件

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

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

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

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

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

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

3.1.冒泡事件:

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

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

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

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

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

4、longtap、touchstart、 touchmovetouchend

  • **longtap**长按事件,当用户长按某个元素超过一定时间后触发。
  • **touchstart、 touchmove、``touchend**触摸相关事件,分别对应手指触摸屏幕开始、移动和离开屏幕的过程。
  • 用于实现拖拽、滑动等更复杂的交互行为
相关推荐
じòぴé南冸じょうげん3 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_916013744 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918416 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张6 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩7 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
阿隆_趣编程9 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
2501_915918411 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾1 天前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
悟空码字1 天前
微信开放平台第三方平台,可以管理多个微信小程序
微信·小程序·开放平台