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的区别的更多相关文章

  1. iOS设备上出现的click,live,on点击失去效果

    iOS设备上出现的点击事件失效,但是在Android上可以正常使用, 1.iOS设备对标签点击限制,不认为是可点击的标签,需要给要绑定点击事件的标签加上一个样式,cursor:pointer:这样就可 ...

  2. iPhone, Android等设备上的Touch和Gesture

    现在,为智能触摸手机创建直观的用户界面时,最重要的部分不再是单纯的视觉效果,而是要创建出能很好地处理用户触摸交互的界面.对于Web应用而言,这意味着使用touch事件来取代传统的mouse事件.在Do ...

  3. tap 和click 事件区别

    clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...

  4. touch.js - 移动设备上的手势识别与事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...

  5. H5 调用 手机设备的功能

    1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...

  6. 关于"touchstart与click同时触发"问题

    点击事件可以分解成多个事件: 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->  click 由于移动设备能够同时 ...

  7. 如何在移动设备上调试html5开发的网页

    在我们用phoengap+html5做的移动app中,经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况,原因是手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台.厂商的不同 ...

  8. XE6 & IOS开发之免证书真机调试(3):生成iPA文件并安装到其它苹果设备上(有图有真相)

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.既然我们已经在真机上 ...

  9. 非root Android设备上Tcpdump的实现

    通常我们在Android应用中执行某个命令时会使用"Runtime.getRuntime().exec("命令路径")"这种方式,但是当我们执行抓包操作时,使用 ...

随机推荐

  1. windows server 2003产生的 Minidmp蓝屏文件分析求助

    在机房运行的四台服务器中均出现了蓝屏dmp文件,经过整理发现CDMS主备服务器最近(2018年1月开始)蓝屏的dmp很多.经过自己的学习分析发现不足以找到先关的原因和处理方法,希望得到大牛们的帮助.以 ...

  2. OpenCV中Mat的使用

    一.数字图像存储概述 数字图像存储时,我们存储的是图像每个像素点的数值,对应的是一个数字矩阵. 二.Mat的存储 1.OpenCV1基于C接口定义的图像存储格式IplImage*,直接暴露内存,如果忘 ...

  3. 关于如何在电脑上安装adb来操作手机(Android)的方法及步骤

    1.需要真实的安卓手机: 2.安卓手机需要开启USB调试模式,允许电脑进行调试(各个手机的开启方式可能不同,不知道的自行百度): 3.电脑需要安装ADB驱动,这里提供一个下载地址:https://ad ...

  4. Java高级框架——Mybatis(二)

    十.三种查询方式 1. selectList()返回值为List<resultType属性控制> 1.1 适用于查询结果都需要遍历的需求 List<Flower> list = ...

  5. Java学习笔记——鸵鸟学习记(二)

    ---恢复内容开始--- 4. 数组对象 4.1 数组的创建 a, 数组对象 在Java语言中,数组对象可以表示一组数字. int[]  arr  =  new int[30];(new可以表示为创建 ...

  6. python之psutil

    psutil = process and system utilities, psutil是个跨平台库,能够轻松实现获取系统运行的进程和系统利用率,包括CPU.内存.磁盘.网络等信息. Linux系统 ...

  7. thinkphp3.2.3集成腾讯云短信文档流程

    昨天晚上折腾了一个小时没解决 今天折腾了20分钟就搞定了 看了thinkphp3.2.3的命名空间解释方法  把文件放到这里 /ThinkPHP/Library/Org/ 把新建了一个Sms文件夹 把 ...

  8. leetcode894

    class Solution { private Map<Integer, List<TreeNode>> memo; public List<TreeNode> ...

  9. 一个PHP session的误区,自己留着长记性看看

    最近在研究PHP session相关的东西,销毁session根据手册使用session_destroy()就可以了,但是天真的以为销毁了会话就可以把会话内容也销毁,但是实际上会话的内容还保存在内存里 ...

  10. 百度地图点聚合MarkerClusterer性能优化

    公司要求做个百度地图点聚合的性能优化,需一次性加载9万条数据. 记录下自己的优化过程.(只想看优化代码的可直接移步:步骤三) 一.引入百度地图 vue项目中,在index.html文件中用script ...