uniapp中的@tap和@click的区别

已于 2022-03-07 14:05:48 修改
阅读量1.8k 收藏 2
点赞数 1
分类专栏： uni-app 文章标签： vue.js 前端 javascript
于 2022-03-07 14:03:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59076775/article/details/123328920
版权

在HbuilderX中，两者都是点击时触发事件;不同的是:

1.@click是组件被点击时触发，会有约300ms的延迟(内置处理优化了)

2.@tap是手指触摸离开时触发，没有300ms的延迟，但是会员事件穿透；

3.编译到小程序端，@click会被转成@tap

事件穿透的理解:  

@tab可以阻止事件冒泡，@click不可以

uniapp轮播图实例和动态获取实例
05-04
本实例将详细介绍如何在 UniApp 中创建一个轮播图，包括静态和动态数据的加载，以及添加交互功能。 首先，`uni-swiper` 是 UniApp 提供的轮播组件，它可以实现自动播放、切换效果。基本的用法是在模板（template）...
uniapp使用@tap与@click的区别
qq_45796592的博客
05-04 3339
tap与click事件的区别
uniapp解决点击事件穿透问题
weixin_40367198的博客
07-13 412
今天开发uni项目的时候，遇到一个点击按钮穿透问题，一开始很自信的使用了@click.stop来解决，发现没有效果，还是会穿透父级事件然后通过请教大佬给出的方法如下：使用@click.native.stop来解决登录后复制 <view class="unbinding" @click.native.stop="u...
在使用uni-app开发小程序时@tap和click的区别
平平无奇前端开发的博客
01-31 2841
在HbuilderX中，两者都是点击时触发事件；
@tap与@click的区别
a_bowl_rice的博客
03-22 564
@tap和@clcik,click是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。而且，tap还有一个特点就是事件穿透，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点击事件的话，也会默认触发。tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。
vue移动端解决click延迟，封装tap，滑动等多个移动端事件js
04-26
移动端点击click事件会有300ms的延迟，而vue没有封装js的移动端tap事件，使用时，页面引用[removed][removed]，通过<li v-tap="{fn:vueTouch,active:0}">全部</li> fn：vueTouch调用。
uniapp 顶部tab切换菜单
03-16
通过查看和学习这个示例，你可以更深入地理解uniAPP中如何创建和管理顶部tab切换菜单。记得在开发过程中，遵循uniAPP的文档和最佳实践，确保代码的可维护性和性能。同时，考虑不同平台的适配问题，确保在各个目标...
signaltap_user_guide.rar_altera 中文_signaltap
09-14
2. **安装与配置**：详述如何在 Quartus II 工具中集成SignalTap，以及如何设置和配置SignalTap内核，包括选择要监控的信号、设置触发条件和数据路径优化等步骤。 3. **调试环境的建立**：指导用户如何在工程中添加...
vue自定义tap指令及tap事件的实现
10-18
在本文中，我们将探讨如何在Vue.js框架内自定义一个tap指令以及tap事件的实现方法。Vue.js是一个流行的前端JavaScript框架，其内置了指令系统，允许开发者根据需求扩展功能。自定义指令可以是全局的，也可以是局部的...
【掰开揉碎】深入了解 @tap 和 @click
tutututu12345678的博客
01-29 1796
当我们深入了解@tap和@click，我们实际上涉及到 uni-app 中的事件绑定，以及这两个指令在底层的实现。
【uniapp】中@tap与@click的区别
ONLYSRY的博客
08-02 814
tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透。click是组件被点击时触发，会有约300ms的延迟内置处理优化了。编译到小程序端，@click会被转换成@tap。
uniapp中@tap和@click区别
不想写代码的一天
07-17 440
原文： https://blog.csdn.net/xulihua_75/article/details/125951020。@click是点击触发事件，会有约300ms的延迟；@tap是手指触摸离开时触发，没有300ms的延迟。不用想太多，把@tap当做@click用就行。
uni-app中@tap和@click
最新发布
qq_39210364的博客
09-07 206
@click有300ms的延迟，@tap为即时触发。@click为组件被点击且手指离开屏幕后才触发的，事件后，如果该元素下面还有其他元素或事件，那么这些元素或事件也会被触发。或移动端网页中，用户对点击事件的即时反馈期望很高，任何延迟都可能会影响用户的体验。在不同的平台或设备上，这两种点击事件的表现可能会有所不同。事件具有事件穿透的特性，这意味着当一个元素上绑定了。事件可能会表现得更加流畅和响应迅速。事件则是在手指触摸屏幕并离开时立即触发的。上，由于触摸屏幕的特性和优化，上，由于主要依赖鼠标操作，
uniapp -- @tap的动态传参
Ada_lake的博客
01-28 1万+
在做小程序的过程中 当遍历某一个对象数组时，我希望在点击时触发某一个事件，并向里传入当前的动态参数 但@tap并不支持动态传参，于是我采取:data-detail="item.month"的方式进行折中 ...
uni-app开发 自定义底部Tap等基础使用与介绍
ou2914671339的博客
06-16 306
新手使用HbuilderX开发uni-app的一些事项 基础使用 和底部Tap的自定义与使用。uni-app支持自定义底部导航栏，通过配置pages.json及编写Vue组件，实现多页面间快速切换。简单配置，灵活定制，提升用户体验
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触发。
uniapp中@tap和@click的区别
热门推荐
王二哥的博客
04-02 4万+
uniapp中@tap和@click的区别 在HbuilderX中，两者都是点击时触发事件；不同的是： @click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）； @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透; 编译到小程序端，@click会被转换成@tap； 结尾处，欢迎交流学习，纠错。 ...
uniapp中@tap
10-10
@tap 是 uniapp 中的一个事件修饰符，用于监听点击事件。当使用 @tap 修饰一个元素时，当用户在移动端点击该元素或在 PC 端使用鼠标点击该元素时，将会触发相应的事件。 @tap 修饰符相比于 @click 修饰符，有以下几个特点： 1. 在移动端，@tap 可以通过针对 touchstart 和 touchend 事件的监听来实现，从而避免了移动端点击延迟的问题。 2. 在 PC 端，@tap 和 @click 实际上是等价的，都是监听鼠标的点击事件。 示例代码如下： ```html <template> <div @tap="handleTap">点击我</div> </template> <script> export default { methods: { handleTap() { console.log('被点击了'); } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值