手机设备上touchstart与click的区别

1.基本定义

  • touchstart 手指触碰开始就能触发
  • click

    1.手指触碰

    2.手指未在屏幕上移动

    3.在这个dom上手指离开屏幕

    4.触摸和离开屏幕之间的时间间隔较短

    因此,click事件有其独特的地方,不能完全用touchstart替代。

2.click延时问题

因为手机浏览器上,两次轻触是放大操作,在第一次被轻触后,浏览器需要先等一段时间,检测是否有第二次连续触碰,才会触发click时间,click时间通常会延迟300ms左右。

解决方法:在touchstart和touchend时记录时间和手指位置,在touchend时进行比较,如果手指为同一位置且时间很短,且期间未触发touchmove时间,则可以认为触发click时间,即为tap事件

作者:星月西
链接:https://www.jianshu.com/p/ab1f57016f1b
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

原文地址:https://www.cnblogs.com/liaozhenghan/p/10159846.html

时间: 2024-11-13 09:27:26

手机设备上touchstart与click的区别的相关文章

如何在手机设备上实时调试

[背景] 1.移动开发使用Chrome模拟设备,但是和真实设备还是有一定出入的 2.QQ和微信使用的X5内核与Chrome的webkit内核有差异,经常遇到奇葩的bug,这种场景又比较多,一般很难定位 3.手机型号颇多,如果遇到某个设备有bug,怎么调试 4.开发环境下手机设备因域限制访问不到办公网络,访问不了开发或测试中的产品页面 [目的] 1.对于Dev.Fe可以在真实设备上实时调试,快速定位原因并解决(包括QQ.微信的内置浏览器) 2.对于QA.PM.UI可以在真实设备上测试办公网络中在开

手机设备上调试接口,查看错误信息

在微信小程序开发的时候,请求接口不成功,手机上未反馈任何消息,不方便调式,这时候就需要把错误信息打印出来 在请求接口错误函数中将obj转换成字符串,再用一个弹窗显示出来... 代码如下: fail: function(res) { wx.showToast({ title: JSON.stringify(res), icon: 'success', duration: 2000 }) } 其中res.errMsg存放的是请求出错的原因,如果请求成功存放的是ok

android 手机设备唯一标识

唯一标识码这东西在网络应用中非常有用,例如检测是否重复注册之类的. [java] view plaincopy import android.provider.Settings.Secure; private String android_id = Secure.getString(getContext().getContentResolver(), Secure.ANDROID_ID); 我们在项目过程中或多或少会使用到设备的唯一识别码,我们希望能够得到一个稳定.可靠的设备唯一识别码.今天我们

一款Android设备上的智能路由器软件:手机服务站

现在智能电视和盒子的配置越来越高,体验越来越好,那么我们除了用它看看电视电影,打打游戏外,还能干什么呢?它占据着客厅的重要位置,是不是可以做点其他的事情? 例如: 1.用它代替无线路由器给我们的手持设备或笔记本共享网络可以吗? 2.能不能把它做成服务器,用来保存一些不方便或者不需要上传到网络云盘里的文件呢? 3.再或者我想建立一个私人的网站,记录家里的点点滴滴,这些,都可以吗? 4.就算以上都可以做,那我管理起来会不会不方便? 所以,在此向各位推荐一个Android软件来解决以上几个问题,而且还

iPhone, Android等设备上的Touch和Gesture

现在,为智能触摸手机创建直观的用户界面时,最重要的部分不再是单纯的视觉效果,而是要创建出能很好地处理用户触摸交互的界面.对于Web应用而言,这意味着使用touch事件来取代传统的mouse事件.在Dojo 1.7中,新的touch API可以帮助您简化这一步骤. 本文是Touching and Gesturing on the iPhone的更新版,该文最早发布于2008年 引言在我们讨论Dojo 1.7中那些帮助创建可触摸界面的新功能之前,先来了解下底层的技术.概念.Apple在发布iPhon

HTML5定稿了,终于有一种编程语言开发的程序可以在Android和IOS两种设备上运行了

2007 年 W3C (万维网联盟)立项 HTML5,直至 2014 年 10 月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5 颠覆了 PC 互联网的格局,优化了移动互联网的体验,接下来,HTML5 将颠覆原生 App 世界.这听起来有点危言耸听,但若认真分析 HTML5 的发展史,你会发现,这个世界的发展趋势确实就是这样. 熟知历史才能预知未来,先让我们来看看 HTML5 为什么诞生.这 8 年是怎么过来的. 一. HTML5 的诞生 自 W3C 于 1999 年发布 HTML

如何在移动设备上调试网页

这篇文章所讲到的方法已经过时,请移步<移动端真机调试终极利器-BrowserSync>,欢迎分享更多工具. 手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台.厂商的不同而有种种兼容性问题.下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试.这里要说明的是,iOS平台只能用自带的Safari浏览器来调试,而Android平台也只能用google Chrome浏览器来调试.当然,我目前只发现这么两种手段,如果你还有其他方法可调试更多的浏览器,希望你能留言告诉

《屏幕上的聪明决策》:4星。人类在手机/电脑上做选择的心理学研究的综述。不流畅的文本有助于理解和记忆,淘汰赛制可以有效降低选择后懊悔。

本书是人类在手机/电脑上做选择的心理学研究的综述,比较可信,有许多有趣的事实与结论.比较重要的结论有这么几个:1:人类对网站.文章的判断很大程度上以来瞬间感知和审美:2:不流畅的文本有助于理解和记忆:3:可选项太多的情况下,可以考虑淘汰赛制,每次让用户从4个选项中选择一个最满意的.这样可以有效降低选择后懊悔. 总体评价4星. 以下是书中一些重要的结论与信息的摘抄,#号后面是kindle电子书中的页码: 1:人的注意力已经成为“21世纪的低硫原油”.如果可以控制人类注意力的杠杆,那么你几乎可以获取

【Win 10应用开发】如何知道当前APP在哪个平台设备上运行

[Win 10应用开发]如何知道当前APP在哪个平台设备上运行 在做Win10开发的时候,我们可能经常会需要获得当前程序在在哪个平台设备上运行,用于UI和相关API的调用,那么可以通过什么方式知道当前APP运行的平台呢? 今天这里提供两个方法给大家做参考: 方法一:DeviceFamily 通过Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily,来获取当前的平台设备,目前只可以得到两个值Windows.Mobile或Wind