首页 > 其他分享 >uniapp中@tap与@click点击事件的差异

uniapp中@tap与@click点击事件的差异

时间:2024-09-05 11:24:43浏览次数:8  
标签:uniapp tap 触发 点击 事件 click 延迟

  在uniapp的开发过程中,我们经常会遇到两种点击事件:@tap@click。虽然它们都是点击事件,但在实际使用中却存在一些微妙的差异。

  首先,让我们来看看它们的触发时机。在uniapp中,

  @click事件是在组件被点击且手指离开屏幕后才触发的,这意味着它会有一个大约300ms的延迟。这种延迟是由于内置处理优化造成的,虽然对于大多数应用场景来说,这种延迟可能并不会造成太大的影响,但在一些需要快速响应的场景中,这种延迟就可能会成为一个问题。例如,在H5游戏或移动端网页中,用户对点击事件的即时反馈期望很高,任何延迟都可能会影响用户的体验。
  相比之下,@tap事件则是在手指触摸屏幕并离开时立即触发的,没有上述的延迟。这使得@tap事件在一些需要快速响应的场景中更具优势。然而,需要注意的是,由于@tap事件是基于触摸事件实现的,因此在一些不支持触摸的设备或环境中,它可能无法正常工作。
  除了触发时机之外,@tap和@click在事件穿透方面也存在差异。在uniapp中,@tap事件具有事件穿透的特性,这意味着当一个元素上绑定了@tap事件后,如果该元素下面还有其他元素或事件,那么这些元素或事件也会被触发。这种行为可能会导致一些不期望的效果,因此在使用时需要特别注意。相比之下,@click事件则不具有事件穿透的特性,它只会触发绑定在点击元素上的事件。
  在实际应用中,我们需要根据具体的需求来选择合适的点击事件。对于一些需要快速响应的场景,如H5游戏或移动端网页,我们可以选择使用@tap事件来避免延迟带来的问题。然而,在一些需要精确控制事件触发的场景中,如表单提交或按钮点击等,我们可能需要使用@click事件来确保只有绑定的元素或事件被触发。
  此外,还需要注意的是,在不同的平台或设备上,这两种点击事件的表现可能会有所不同。例如,在一些移动设备上,由于触摸屏幕的特性和优化,@tap事件可能会表现得更加流畅和响应迅速。而在一些传统的PC设备上,由于主要依赖鼠标操作,@click事件可能会更加适用。
  综上所述,@tap和@click虽然都是点击事件,但在触发时机、事件穿透以及应用场景等方面都存在差异。作为开发者,我们需要根据具体的需求和场景来选择合适的点击事件,以提供更好的用户体验和性能。

标签:uniapp,tap,触发,点击,事件,click,延迟
From: https://www.cnblogs.com/bwteacher/p/18398024

相关文章

  • 记录 macos 链接 win10 wsl2 ubuntu clickhouse 记录
    遇到了许多问题顺序应该不同首先就是链接的客户端是DBeaver链接的时候要选择版本低版本的用legacy,   驱动也很重要,下不到驱动的可以用网上找的驱动来安装  有的时候会有类名的问题但是报错很离谱会报  dbeaverclickhouse链接错误code:46Unknow......
  • uniapp js 数独小游戏 写死的简单数独demo(优化完成) 数独 4.0
    <template> <viewclass="wrap">  <viewclass="timeGame">   <textclass="time">时间{{gameTime}}</text>  </view>  <viewclass="listWrap">   <view    ......
  • uniapp 在APP端下载保存图片到根目录下文件夹内
    checkImageExist(){   uni.showLoading({       mask:true,   })   leturl='图片地址'   uni.getImageInfo({       src:url,       complete:function(image){           if(image.errMsg=='getImageInfo:ok'){......
  • Tapd与Ones深度对比:如何选择最适合的研发管理利器
    在数字化时代,研发管理工具对于企业的重要性不言而喻。Tapd和Ones作为市场上备受瞩目的两款工具,各自拥有独特的优势和特点。本文将从多个角度对Tapd和Ones进行深入对比分析,帮助企业更好地选择适合自己的研发管理利器。产品定位与核心功能TapdTapd是腾讯推出的一款专注于产......
  • 前端项目实战Uniapp移动端项目+Vue3+Typescript+AntdVue管理平台
    ‌前端项目实战:‌构建Uniapp移动端项目与Vue3+Typescript+AntdVue管理平台‌在当今的前端开发领域,‌技术的不断迭代和创新为开发者带来了更多的选择和可能性。‌本文将介绍如何使用Uniapp框架开发移动端项目,‌并结合Vue3、‌Typescript以及AntdVue来构建一个高效的管理平台。......
  • 基于uniapp的畅玩旅游景点门票预订系统的设计与实现b3w12 微信小程序
    目录博主介绍技术栈系统设计......
  • clickhouse组件介绍
    写在前面今天学习clickhouse部分的知识。ClickHouseOLTP(联机事务处理系统)例如MySQL等关系型数据库,适用于小数据量时的快速查询和分析。OLTP主要针对增删改操作,数据经常发生变化。OLAP(联机分析处理系统)适用于数据长期不变且有大量历史数据的场景,主要进行分析操作,增......
  • Tape-out Checklist Form
    Tape-outChecklistFormCheckItemDescriptionYes/NoNote设计文档检查设计文档完善且与最新设计版本保持一致验证文档检查验证文档完善且记录了全部验证用例及结果验证范围检查验证条目已经覆盖了所有的电路模块以及整体电路功能覆盖率检查数字设......
  • FastAPI+Vue3零基础开发ERP系统项目实战课 20240831上课笔记 查询参数和分页实现
    回顾获取路径参数什么是路径参数?/user/{id}什么时候使用?需要传递参数怎么实现类型转换?声明参数的类型怎么捕获文件路径?{file_path:path}什么是查询参数查询字符串是键值对的集合,这些键值对位于URL的?之后,以&分隔。http://127.0.0.1:8000/items/?skip=0&limit=10......
  • uniapp 复制编译后sourcemap复制到工程内
    sourcemap.jsconstfs=require('fs');constpath=require('path');/***将/dist/dev/.sourcemap文件复制到/dist/dev/mp-toutiao/.sourcemap*/lettriggerMove=false;module.exports=async()=>{if(triggerMove)return;tri......