uni-app中@tap和@click

手电筒joy

已于 2024-09-07 19:25:16 修改

阅读量206

点赞数 3

文章标签： uni-app

于 2024-09-07 19:24:36 首次发布

本文链接：https://blog.csdn.net/qq_39210364/article/details/142000632

版权

偶然接触到了@tap，查询了一下用法

触发时机：@click有300ms的延迟，@tap为即时触发。@click为组件被点击且手指离开屏幕后才触发的，@tap事件则是在手指触摸屏幕并离开时立即触发的。

例如，在H5游戏或移动端网页中，用户对点击事件的即时反馈期望很高，任何延迟都可能会影响用户的体验。

事件穿透：@tap事件具有事件穿透的特性，这意味着当一个元素上绑定了@tap事件后，如果该元素下面还有其他元素或事件，那么这些元素或事件也会被触发。@click则不具有事件穿透性

在不同的平台或设备上，这两种点击事件的表现可能会有所不同。例如，在一些移动设备上，由于触摸屏幕的特性和优化，@tap事件可能会表现得更加流畅和响应迅速。而在一些传统的PC设备上，由于主要依赖鼠标操作，@click事件可能会更加适用。

深入解析uniapp中的@tap与@click：点击事件的微妙差异 (baidu.com)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

手电筒joy

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【掰开揉碎】深入了解 @tap 和 @click

tutututu12345678的博客

01-29

1797

当我们深入了解@tap和@click，我们实际上涉及到 uni-app 中的事件绑定，以及这两个指令在底层的实现。

Vue3 + Ts + Pinia + uni-app 学习笔记

qq_33365152的博客

09-13

553

Vue3 +Ts + Pinia + uni-app 学习笔记

参与评论您还未登录，请先登录后发表或查看评论

uniapp中的@tap和@click的区别

qq_44776454的博客

07-03

7054

1.click事件是PC端的常用的单击事件，但是当这个事件在移动端实现的时候，会出现延迟300ms的现象，所以移动端一般用tap来代替click。@click是组件被点击时触发，会有约300ms的延迟(内置处理优化了)。2.@tap是手指触摸离开时触发，没有300ms的延迟，减少click在移动端的延迟，提高了性能。3.编译到小程序端，@click会被转成@tap。

uniapp中@click或者@tap多层嵌套的问题解决方法

最新发布

知码客

07-25

791

我们在开发页面的过程中。例如要设计一个九宫格的相册，并且加上删除上传图片和点击图片后预览图片大图的功能例如下图的演示功能。通过上面我们可以看到我们涉及到了两个点击的操作调用了不同的方法，就会遇到一个问题就是点击外围。号后要删除掉当前的图片，那么我们设计的时候如果我们代码写成如下的格式。这个仅仅是我自己的一个笔记整体九宫格实现的代码后续整理再发布。是不生效的，那么我们处理的方式很简单。点击图片后显示大图预览图片，点击。

uniapp使用@tap与@click的区别

qq_45796592的博客

05-04

3339

tap与click事件的区别

【uniapp】中@tap与@click的区别

ONLYSRY的博客

08-02

814

tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透。click是组件被点击时触发，会有约300ms的延迟内置处理优化了。编译到小程序端，@click会被转换成@tap。

uni-app里@click.native是什么事件

05-24

@click.native是uni-app中的一个自定义事件，它可以用于在组件上绑定原生的点击事件（tap）。当用户点击组件时，会触发@click.native事件，并执行绑定的方法。与@click事件不同的是，@click.native事件绑定的方法会...

Uni-app跨平台开发

2301_78827988的博客

06-22

812

Uni-app是一种跨平台的移动应用程序开发框架，可以使开发者使用相同的代码同时构建iOS和Android应用程序。以下是几个Uni-app跨平台开发的优点：统一原生组件：Uni-app使用Vue.js框架开发，它提供了一套统一的原生组件，可以被不同的平台识别和使用。这使得开发人员无需学习多种不同的原生开发语言和框架，大大降低了开发应用程序的门槛。自适应屏幕：Uni-app可以根据不同设备的分辨率和屏幕大小进行自适应，确保应用程序在不同平台上的兼容性。

uni-app如何页面传参数的几种方法总结

10-15

本文将详细介绍uni-app页面传参数的几种方法，特别关注`uni.$emit()`和`uni.$on()`的使用，以及它们在实际开发中的应用场景。首先，`uni.$emit(eventName, OBJECT)`是用来触发全局的自定义事件。你可以向事件中...

了解移动端uniapp中,tap和click的区别

爬楼梯的前端小白的博客

04-13

4190

tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。另外，click事假是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms这样，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。而且，tap还有一个特点就是『事件穿透』，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点子事件的话，也会默认触发。 ..

在使用uni-app开发小程序时@tap和click的区别

平平无奇前端开发的博客

01-31

2841

在HbuilderX中，两者都是点击时触发事件；

uniapp中@tap和@click的区别

热门推荐

王二哥的博客

04-02

4万+

uniapp中@tap和@click的区别在HbuilderX中，两者都是点击时触发事件；不同的是： @click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）； @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透; 编译到小程序端，@click会被转换成@tap；结尾处，欢迎交流学习，纠错。 ...

uni-app开发自定义底部Tap等基础使用与介绍

ou2914671339的博客

06-16

306

新手使用HbuilderX开发uni-app的一些事项基础使用和底部Tap的自定义与使用。uni-app支持自定义底部导航栏，通过配置pages.json及编写Vue组件，实现多页面间快速切换。简单配置，灵活定制，提升用户体验

uni-app的使用

weixin_58431406的博客

02-15

983

创建项目-介绍项目目录和文件作用-运行项目-创建新的页面-通过pages来配置页面- 通过style修改页面的标题和导航栏背景色-配置tabbar-组件的基本使用-数据绑定- v-for循环-事件绑定-生命周期-网络请求-导航跳转------uni-app中使用uView 组件库：

uni-app中@tap和@click的区别

shi15926lei的博客

04-14

1074

tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。1.Vue的v-on修饰符中有部分只能由@click触发，如.once .capture .native；2.@click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）；@tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透;3.微信小程序开发过程中，部分场景@tap无法被自动编译成@click触发。

【uni-app】 APP真机，子组件click&tap事件无效解决

weixin_46939955的博客

08-18

2589

uni-app，子组件绑定click&tap事件，点击无效

uniapp中@tap和@click区别

不想写代码的一天

07-17

440

原文： https://blog.csdn.net/xulihua_75/article/details/125951020。@click是点击触发事件，会有约300ms的延迟；@tap是手指触摸离开时触发，没有300ms的延迟。不用想太多，把@tap当做@click用就行。