一、click 和 tap 比较

两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。

singleTap和doubleTap 分别代表单次点击和双次点击。

二、关于tap的点透处理

在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件。

处理方式:

(1)、

github上有一个叫做fastclick的库,它也能规避移动设备上click事件的延迟响应,https://github.com/ftlabs/fastclick
将它用script标签引入页面(该库支持AMD,于是你也可以按照AMD规范,用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上,如:

1
2
3
$(function(){
    newFastClick(document.body);
})

然后给需要“无延迟点击”的元素绑定click事件(注意不再是绑定zepto的tap事件)即可。
当然,你也可以不在body上初始化它,而在某个dom上初始化,这样,只有这个dom和它的子元素才能享受“无延迟”的点击

实践开发中发现,当元素绑定fastclick后,click响应速度比tap还要快一点点。哈哈

(2)、为元素绑定touchend事件,并在内部加上e.preventDefault();

$demo.on('touchend',function(e){//
改变了事件名称,tap是在body上才被触发,而touchend是原生的事件,在dom本身上就会被捕获触发
    $demo.hide()
    e.preventDefault();//
阻止“默认行为”
})

三、touch事件touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听,让开发者可以获取用户触摸屏幕时的一些信息。

其中包括:touchstart,touchmove,touchend,touchcancel 这四个事件

touchstart,touchmove,touchend事件可以类比于mousedown,mouseover
,mouseup的触发。

touchstart : 当手指触摸到屏幕会触发;

touchmove : 当手指在屏幕上移动时,会触发;

touchend : 当手指离开屏幕时,会触发;

当然还有一个touchcancel,是在拖动中断时候触发。

例如:

这4个事件的触发顺序为:

touchmove
-> …… -> touchmove ->touchend

但是单凭监听上面的单个事件,不足以满足我们去完成监听在触屏手机常见的一些手势操作,如双击、长按、左右滑动、缩放等手势操作。需要组合监听这些事件去封装对这类手势动作。

其实市面上很多框架都针对手机浏览器封装了这些手势,例如jqmobile、zepto、jqtouch,不过悲剧发生了,对于某些Android系统(我自己测试到的在android 4.0.x),touchmove和touchend事件不能被很好的触发,举例子说明下:

比如手指在屏幕由上向下拖动页面时,理论上是会触发 一个 touchmove
,和最终的 touchend ,可是在android 4.0上,touchmove只被触发一次,触发时间和touchstart
差不多,而touchend直接没有被触发。这是一个非常严重的bug,在google Issue已有不少人提出  http://code.google.com/p/android/issues/detail?id=19827

暂时我只发现在android 4.0会有这个bug,据说 ios 3.x的版本也会有。

而显然jqmobile、zepto等都没有意识到这个bug对监听实现带来的严重影响,所以在直接使用这些框架的event时,或多或少会出现兼容性问题!

转载自:http://www.xuebuyuan.com/2174858.html

移动端click时间、touch事件、tap事件详解的更多相关文章

  1. tap事件的原理详解

    点击事件延迟问题所在: 在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件 为什么要解决: 随着h5游戏, ...

  2. Android Touch事件传递机制详解 下

    尊重原创:http://blog.csdn.net/yuanzeyao/article/details/38025165 资源下载:http://download.csdn.net/detail/yu ...

  3. Android事件传递机制详解及最新源码分析——ViewGroup篇

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 在上一篇<Android事件传递机制详解及最新源码分析--View篇>中,详细讲解了View事件的传递机制,没掌握或者掌握不扎实的小伙伴 ...

  4. javascript event(事件对象)详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  5. Android开发——事件分发机制详解

    0. 前言   转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52566965 深入学习事件分发机制,是为了解决在Android开发中 ...

  6. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  7. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  8. C#事件与委托详解

    from https://www.cnblogs.com/sjqq/p/6917497.html C#事件与委托详解[精华 多看看] Delegatedelegate是C#中的一种类型,它实际上是一个 ...

  9. Android事件分发机制详解

    事件分发机制详解 一.基础知识介绍 1.经常用的事件有:MotionEvent.ACTION_DOWN,MotionEvent.ACTION_MOVE,MotionEvent.ACTION_UP等 2 ...

  10. Android 的事件传递机制,详解

    Android 的事件传递机制,详解 前两天和一个朋友聊天的时候.然后说到事件传递机制.然后让我说的时候,忽然发现说的不是非常清楚,事实上Android 的事件传递机制也是知道一些,可是感觉自己知道的 ...

随机推荐

  1. oracle 、server和my sql 语法区别

    1.总结Oracle .sqlserver和mysql中查询10-20条记录的写法 一: oracle数据库写法: 1:select * from (select rownum rn ,* from ...

  2. ZOJ 3494 BCD Code (数位DP,AC自动机)

    题意: 将一个整数表示成4个bit的bcd码就成了一个01串,如果该串中出现了部分病毒串,则是危险的.给出n个病毒串(n<=100,长度<21),问区间[L,R]中有几个数字是不含病毒串的 ...

  3. LeetCode Pascal's Triangle Pascal三角形

    题意:给一个数字,返回一个二维数组,包含一个三角形. 思路:n=0.1.2都是特例,特别处理.3行以上的的头尾都是1,其他都是依靠上一行的两个数.具体了解Pascal三角形原理. class Solu ...

  4. HDU 2149 Public Sale 拍卖(巴什博弈)

    思路:只要能给对方留下n+1,我就能胜,否则败. #include <iostream> #include <cstdio> using namespace std; int ...

  5. 使用tensorflow object_detection API训练自己的数据遇到的问题及解决方法

    1.Windows下出现找不到object_detection包的问题. 解决方法 在Anaconda3\soft\Lib\site-packages新建一个pth文件,将PedestrianDete ...

  6. 2018.5.8 XML编程

    1.XML的概念 XML(Extensible Markup Language)可扩展性标记语言是一套定义语义标记的规则,这些标记将文档分成许多部件并对这些部件加以标识. 可拓展性标记语言是SGML( ...

  7. 2018.4.28 基于java的聊天系统(带完善)

    Java聊天系统 1.Socket类 Socket(InetAddress address, int port) 创建一个流套接字并将其连接到指定 IP 地址的指定端口号. Socket(String ...

  8. Python——字典dict()详解

    一.字典 字典是Python提供的一种数据类型,用于存放有映射关系的数据,字典相当于两组数据,其中一组是key,是关键数据(程序对字典的操作都是基于key),另一组数据是value,可以通过key来进 ...

  9. tcp 高性能服务, netty,mqtt

    1. io 线程不要有比较长的服务. 全部异步化. [1] netty 权威指南上只是说业务复杂时派发到业务线程池种. 共用的线程池最好都轻量. 多层线程池后, 下层的可以进行隔离. 这个是 mqtt ...

  10. java用org.apache.poi包操作excel

    一.POI简介 Jakarta POI 是apache的子项目,目标是处理ole2对象.它提供了一组操纵Windows文档的Java API 目前比较成熟的是HSSF接口,处理MS Excel(97- ...