手机设备上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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
手机设备上touchstart与click的区别的更多相关文章
- iOS设备上出现的click,live,on点击失去效果
iOS设备上出现的点击事件失效,但是在Android上可以正常使用, 1.iOS设备对标签点击限制,不认为是可点击的标签,需要给要绑定点击事件的标签加上一个样式,cursor:pointer:这样就可 ...
- iPhone, Android等设备上的Touch和Gesture
现在,为智能触摸手机创建直观的用户界面时,最重要的部分不再是单纯的视觉效果,而是要创建出能很好地处理用户触摸交互的界面.对于Web应用而言,这意味着使用touch事件来取代传统的mouse事件.在Do ...
- tap 和click 事件区别
clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...
- touch.js - 移动设备上的手势识别与事件库
Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...
- H5 调用 手机设备的功能
1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...
- 关于"touchstart与click同时触发"问题
点击事件可以分解成多个事件: 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend --> click 由于移动设备能够同时 ...
- 如何在移动设备上调试html5开发的网页
在我们用phoengap+html5做的移动app中,经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况,原因是手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台.厂商的不同 ...
- XE6 & IOS开发之免证书真机调试(3):生成iPA文件并安装到其它苹果设备上(有图有真相)
网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.既然我们已经在真机上 ...
- 非root Android设备上Tcpdump的实现
通常我们在Android应用中执行某个命令时会使用"Runtime.getRuntime().exec("命令路径")"这种方式,但是当我们执行抓包操作时,使用 ...
随机推荐
- mybatis关于ORM的使用以及设计(三)[参数对象转换为SQL语言]
上节分析了Mapper对象的创建. 在ORM的定义中可以理解为Object->SQLMapper抽象层(这一层并不负责具体的SQL执行.这一层可以理解为SQL代理层) 本节分析以下内容: ①Sq ...
- Linux下搭建jmeter
最近做性能测试,Windows下跑jmeter,并发跑不到100,CPU就100%,这还是在命令行模式下,真心头大.没办法,只好搞个Linux来跑了,下面说下如何玩转的. 1.下载Ubuntu操作系统 ...
- 封装poi导出篇
前言 先写的导入,以为导出会很简单,没想到导出的东西也不少,基于常用的几种样式和校验写了一个简单的导出,包括时间,数字,文字长度,下拉框,提示框校验,基础样式包括字体,字体颜色,背景颜色等功能,可以使 ...
- 六、Python-字符串编码
最早的编码为ASCII码(包含0-9.A-Z.a-z.符号(空格.制表符等)),最多支持256个符号(每个符号占1字节) GBK/GB2312:我国制定的中文编码标准,一个字节表示因为字母,两个字 ...
- HTML一片空白, 无法渲染: Empty tag doesn't work in some browsers
html 文件直接引入一个script, 如下 <html> <head> <script type="application/javascript" ...
- wdk1703+vs2015编译的诡异问题
最近将wdk升级到1703(10.0.15063.0)版本,编译一个新建的minifiter项目居然出现了失败 提示错误为 WindowsDriver.common.targets(460,5): e ...
- 渐进反馈式搜索技术助力运维工程师——Linux命令高效检索
日常生活工作中,我们通过搜索引擎查询相关资料时,经常遇到不知如何指定准确关键词的情况,仅仅根据指定大概范围的关键词时,搜索结果往往不能尽如人意. <信息导航>APP最新版本(Ver 1.1 ...
- orcal - 分组
执行顺序 from where group by having select order by 多表查询与分组查询的时候,查询结果相当于是一张临时表,所有的分组是在临时表操作 分组统计查询 COUNT ...
- Git上传本地代码
Git add .将本地文件上传至缓冲区 git commit -m 'project init' 将代码上传至本地仓库 Git push 将本地的代码传至线上(码云) git ...
- Javascript 使用 async 声明符和 await 操作符进行异步操作
async function 声明用于定义一个返回 AsyncFunction 对象的异步函数 await 操作符用于等待一个Promise 对象.它只能在异步函数 async function 中 ...