微信小程序之点击事件

微信小程序中常用的点击事件主要是 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**触摸相关事件,分别对应手指触摸屏幕开始、移动和离开屏幕的过程。
  • 用于实现拖拽、滑动等更复杂的交互行为
相关推荐
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220693 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧