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

最新推荐文章于 2024-09-07 19:24:36 发布
原创 最新推荐文章于 2024-09-07 19:24:36 发布 · 3.2k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

本文详细解析了HBuilderX中@click与@tap事件触发的区别，前者有约300ms延迟，后者则没有延迟但可能出现事件穿透现象。文章还介绍了如何使用@tap.stop来阻止事件的传播。

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

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

如何使用@tap.stop阻止事件继续传播

@tap.stop="事件名" 不能只在当前标签添加 也需要在外层标签同样使用@tap.stop="事件名"

 

uni-app - 小程序使用高德地图完整版
King Saj
04-30 927
页面自动通过定位获取用户位置并展示周边POI数据，同时支持关键词输入实时联想推荐关联地点信息，实现精准智能的地点发现与检索功能。
微信小程序通讯录功能；uni-app微信小程序通讯录单选；uni-app微信小程序通讯录多选；uni-app微信小程序通讯录好友功能；uni-indexed-list使用；通讯录高度修改；
i_am_a_div的博客
08-23 4328
介绍：项目使用的是uni-app做的微信小程序；uni-app里原来就用一个组件uni-indexed-list，是用来做通讯录的；可以直接看官方案例也就是hello-uniapp-master下的导航栏；但是官方这个是多选，且没有默认选中功能；故本文是在使用官方组件同时，修改原组件的代码来达到单选和默认选中功能； 解决思路： ...
@tap.stop阻止事件继续传播
weixin_45890764的博客
01-18 1万+
在uni-app开发当中，难免会遇到外层view嵌套内层view，又同时都含有点击事件，这样就会起冲突。为了防止事件的继续传播我们就会用到事件修饰符.stop ，先看代码 <template> <view class="wai" @tap="waiTab"> <h5>外面</h5> <view class="nei" @tap="neiTab"> <h5>内部</h5> </view> &l
uni-app——如何阻止事件冒泡
TianXuab的博客
10-27 1万+
在开始讨论如何阻止事件冒泡之前，让我们先了解一下什么是事件冒泡。事件冒泡是指当一个元素上的事件被触发时，它会向上级元素传播，直到到达文档根节点。这意味着如果我们不采取任何措施，事件将会被多个元素捕获和处理。
关于微信小程序（随记）
Ajiangwa的博客
08-29 1253
小程序一、小程序与普通网页开发的区别？1.1 区别1.2 小程序代码构成1.3 WXML1.4 WXSS1.5 JS文件的分类二、小程序宿主环境2.1 手机微信2.2 包含的内容2.3 通信模型2.4 运行机制2.5 组件2.6 API 三大分类2.7 协同工作和发布 一、小程序与普通网页开发的区别？ 1.1 区别 1.2 小程序代码构成 项目的基本组成结构： pages 用来存放所有小程序的页面，每个页面都是一个单独的文件夹 utils 用来存放工具性质的模块 app.js 整个小程序项目的入口文件
uniapp中的@tap和@click的区别
qq_44776454的博客
07-03 9266
1.click事件是PC端的常用的单击事件，但是当这个事件在移动端实现的时候，会出现延迟300ms的现象，所以移动端一般用tap来代替click。@click是组件被点击时触发，会有约300ms的延迟(内置处理优化了)。2.@tap是手指触摸离开时触发，没有300ms的延迟，减少click在移动端的延迟，提高了性能。3.编译到小程序端，@click会被转成@tap。
Uni-app跨平台开发
2301_78827988的博客
06-22 922
Uni-app是一种跨平台的移动应用程序开发框架，可以使开发者使用相同的代码同时构建iOS和Android应用程序。以下是几个Uni-app跨平台开发的优点：统一原生组件：Uni-app使用Vue.js框架开发，它提供了一套统一的原生组件，可以被不同的平台识别和使用。这使得开发人员无需学习多种不同的原生开发语言和框架，大大降低了开发应用程序的门槛。自适应屏幕：Uni-app可以根据不同设备的分辨率和屏幕大小进行自适应，确保应用程序在不同平台上的兼容性。
uni-app中使用@tap.stop解决事件冒泡问题
因此，在uni-app进行多端适配开发时，若目标平台包含小程序，建议优先考虑使用`@tap`作为主要的点击事件绑定方式，特别是在涉及事件阻止、捕获等高级控制需求时。 此外，该问题也暴露出开发者在跨平台开发中容易...
uni-app小程序中点击事件@click安卓手机上不能用吗
最新发布
07-03
在 uni-app 小程序中，使用 `@click` 事件时在安卓手机上无效的情况可能由多个因素导致。以下是对常见原因的分析以及对应的解决方案。 ### 3.1 原因分析 #### 3.1.1 层级遮挡问题 在某些情况下，页面中的元素可能...
@tap和@click区别
m0_62600503的博客
01-24 2196
都是点击事件，但它们在延迟等方面上有所不同。在移动端开发中，如果追求更快的响应速度，建议使用。事件通常用于移动端，因为它能够更好地适应移动设备的快速响应需求。都是用于处理点击事件的，但它们之间存在一些差异。选择哪一个取决于具体的应用场景和性能要求。而在不特别要求即时响应的情况下，可以使用。事件则更常见于传统的网页开发中。
@tap和@click的区别
weixin_57633124的博客
05-04 2706
@tap和@click的区别
uniapp中@tap和@click的区别
热门推荐
王二哥的博客
04-02 4万+
uniapp中@tap和@click的区别 在HbuilderX中，两者都是点击时触发事件；不同的是： @click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）； @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透; 编译到小程序端，@click会被转换成@tap； 结尾处，欢迎交流学习，纠错。 ...
@tap与@click的区别
没化妆，别看
05-06 7669
@tap与@click的区别 tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。 另外，click事件是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。 而且，tap还有一个特点就是事件穿透，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点击事件
【掰开揉碎】深入了解 @tap 和 @click
tutututu12345678的博客
01-29 2573
当我们深入了解@tap和@click，我们实际上涉及到 uni-app 中的事件绑定，以及这两个指令在底层的实现。
uni-app中@tap和@click
qq_39210364的博客
09-07 675
@click有300ms的延迟，@tap为即时触发。@click为组件被点击且手指离开屏幕后才触发的，事件后，如果该元素下面还有其他元素或事件，那么这些元素或事件也会被触发。或移动端网页中，用户对点击事件的即时反馈期望很高，任何延迟都可能会影响用户的体验。在不同的平台或设备上，这两种点击事件的表现可能会有所不同。事件具有事件穿透的特性，这意味着当一个元素上绑定了。事件可能会表现得更加流畅和响应迅速。事件则是在手指触摸屏幕并离开时立即触发的。上，由于触摸屏幕的特性和优化，上，由于主要依赖鼠标操作，
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值