开发者学堂课程【移动 Web 前端开发：js- 理解 tap 事件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8426
js- 理解 tap 事件
内容介绍
一、tap 事件
二、click 事件的解决方案
三、移动端相关事件的演示
一、tap 事件
1.tap 的含义
理解到手势事件：上划下划左划右划后，另一个移动端事件也需要理解，现将此事件称为 08tap 事件（较为简单，移动端中时常运用）
Tap：轻触，轻触事件，即轻轻摸一下。在第一次讲述移动端时提及的一个属性：tap-highlight-color（点击高亮）
2. tap 事件的演示
（1）
<!DOCTYPE html>
<html>
<head lang=‘en’>
<meta charset=‘UTF-8’>
//进行 meta 标签的拿取
<meta name=‘viewport’>
Content=‘width=device-width,user-scaleable=no,initital-scale=1,0,maxmum-scale=1.0,
<title>tap 事件的原理 手势事件</title>
//进行样式的拿取
<style>
Body{
margin: 0;
padding: 0;
}
Div}
width: 100%;
height: 200px;
background: red;
}
</style>
</head>
<body>
//准备 div
<div></div>
//准备思科
<script>
Window.onload = function(){
}
</body>
</html>
（2）目的
tap 的形成过程，即理解 tap 事件的原理
由于 tap 事件也是一个过程，即可将其理解为一个手势事件。在接触 tap 之前，首先将总结的如移动端的轻触事件（例如通过轮播图衍生出了上划下划左划右划）进行讲解
（3）讲述 tap 的原因
Tap = 轻触
讲述左右上下滑动时，是由于轮播图有滑动而衍生而出的，而单独讲述tap与移动端的 click 事件有关。
（4）操作
//找到 Window.onload = function(){和document.querySelector(‘div’)进行绑定
Window.onload = function(){
var div = document.querySelector(‘div’);
//同时进行四个的绑定
div.addEventListener(‘click’,function(){
//打印click
console.log(‘click’);
});
//tap 事件与 touch 有关，touch-滑动 、触动、触摸的含义，而轻触与触摸有关
div.addEventListener(‘touchstart’,function(){
console.log(‘touchstart’);
});
div.addEventListener(‘touchmove’,function(){
console.log(‘touchmove’);
});
div.addEventListener(‘touchend’,function(){
console.log(‘touchend’);
});
}
//分别进行打印事件后，由于当时为模拟器并不明显，但同样能够查看出来。
假设只点击一下，猜想触发的事件中，第一为 touchstart ,第二为 touchend ，第三为 click；
实际演示1：
touchstart 08 tap事件.html:30
touchend 08 tap事件.html:36
click 08 tap事件.html:27
假设只滑动一下，猜想触发的事件中，第一为 touchstart,第二为 touchmove，第三为 touchend，此时click并不会执行。
实际演示2：
touchstart 08 tap事件.html:30
touchmove 08 tap事件.html:33
touchend 08 tap事件.html:36
故而，tap 与点击有关，与滑动无关。当点击时，click 最后执行，touchstart 和touchend 提前执行，click 在移动端存在问题。
尽管看似在本模拟器内各事件的打印都较为快速，间隔并不长，但在真正的移动端中，仍然存在一定的打印距离。
二、click 事件的解决方案
1.移动端的特点及问题：300ms左右的延时
（1）特点
存在此特性的情况下进行滑动，将会拥有一段停滞的时间，而后再进行滑动。在开始点击屏幕时即可算为点击。当手指触摸到屏幕时，若不控制时间进行滑动，将会被认为是点击。移动端众多后存在滑动事件，需要为滑动提供时间，若否则会在手指放置于屏幕旋即出发 click。故此延时为移动端特有。
简单来说，由于移动端有滑动曲线，应当为滑动空出时间令其进行滑动或点击的选择。
（2）问题
造成响应过慢的问题，使得用户体验下降：拥有有卡顿的效果。
2.click 事件的解决方案
方案一：tap（比 click 响应更快的事件，但此事件并非原生, click 可以进行绑定，而tap相似于手势事件），通过 touch 进行的衍生,即某些条件的归纳
（1）分析衍生进行的过程/tap 事件的原理
在给手势提出：
①必须滑动过
②滑动的距离超过50px
以上条件并满足时即认为其为滑动事件。
（2）在tap事件中，应满足的条件有：
①比 click 响应更快（150ms以内）
此前进行实际演示后得出，点击后首先将进行 touchstart 和 touchend，最后为click，，则可通过前两事件位于 click 之前进行判断。若 touch 两事件的相应小于click 的 300ms，则可认为其为 tap，实现了在 click 之前对其进行判断的处理。由于点击时只会触发 touchstart 和 touchend，即当判断得出 touchstart 和 touchend 之间的间隔比 click 更小时，就验证得到了了两者比 click 更快的事实。
实际演示
进行点击：
touchstart 08 tap事件.html:35
touchend 08 tap事件.html:41
click 08 tap事件.html:27
此时可以看到三个事件。
但若更换为长按，即可能会超过300ms，则 touchstart 和 touchend 可能比 click更慢。
click 为300ms，当比 click 响应更快时为一种更快速更简便的查看方式。将响应更快的称为 tap，即tap的出现是为了提高响应速度。同时会运用到通过 touchstart 和 touchend 的间隔时间与300ms的对比大小。
②不能滑动
满足以上条件即可称为 tap 事件
（3）求得响应时间的方法
当记录的不再是坐标而是时间时，记录刚刚触摸到屏幕的时间和离开屏幕的时间，两时间一相减即响应时间。
判断两时间的方法：
/*1.记录开始触摸到屏幕的时间/
div.addEventListener(‘touchstart’,function(){
console.log(‘touchstart’);
});
div.addEventListener(‘touchmove’,function(){
console.log(‘touchmove’);
});
div.addEventListener(‘touchend’,function(){;
/*2.更新现在的时间，以比较记录开始触摸的时间。若<150ms,则满足条件。/
console.log(‘touchend’);
});
}
对于比较的方法，存在另外的一种打印方式名为 time，属于 console 之中的time。
//1.记录开始触摸到屏幕的时间
div.addEventListener(‘touchstart’,function(){
//给定一个参数开始记录时间
console.time(‘time’);
});
div.addEventListener(‘touchmove’,function(){
console.log(‘touchmove’);
});
div.addEventListener(‘touchstart’,function(){
console.time(‘time’);
//此处的 time 仅作为记录时间
});
div.addEventListener(‘touchmove’,function(){
console.log(‘touchmove’);
});
div.addEventListener(‘touchend’,function(){;
//2.更新现在的时间，以比较记录开始触摸的时间。若<150ms,则满足条件。
//进行打印。当前存在两种 console,但两者之中只会在 End 处进行打印。
//去除某个参数和现在事件的差
console.timeEnd(‘time’);
});
实际演示1
刷新之后进行点击
time:86.269ms 08 tap事件.html:45
click 08 tap事件.html:27
刷新之后进行点击（time 的含义）
time:103.704ms 08 tap事件.html:42
当前 touchend 和 touchstart 的响应时间是103.704ms，此为console.time(‘time’)的固有功能。
在开始处记录时间，于 end 处再次记录时间与此前的 time 进行对比，即可打印出两次之间的时间。
实际演示2
刷新之后进行点击
time:109.371ms 08 tap事件.html:45
time:71.391ms 08 tap事件.html:45
进行快速点击
time:109.371ms 08 tap事件.html:45
time:71.391ms 08 tap事件.html:45
time:55.822ms 08 tap事件.html:45 //此为当前最快速
time:69.977ms 08 tap事件.html:45
time:63.0141ms 08 tap事件.html:45
time:94.632ms 08 tap事件.html:45
time:407.133ms 08 tap事件.html:45//此为当前最慢，不能满足tap事件的要求
在以上演示中，只有最后一次407.133不满足 tap 事件，其余均满足，体现出了响应速度的提高。此时触发 lick 去进行所想做的事，响应速度将会大大提高。
time 相关内容了解即可，真实情况下其只进行打印，并不能使用,此时需要进行记录。
//在最初声明一个 time
/*1.记录开始触摸到屏幕的时间/
var startTime = 0;
//获取当前事件的方法：两个记录的时间相减
startTime 1= new Date().getTime(); //当前距离1970年的毫秒数
此种方法首先需要进行初始化，需要花费时间，现有一种更为简洁的方法：
startTime = Date.now(); //此相当于直接掉落对象，而不去初始化对象
console.time(‘time’);
});
div.addEventListener(‘touchmove’,function(){
});
div.addEventListener(‘touchstart’,function(){
console.time(‘time’);
//此处的 time 仅作为记录时间
});
div.addEventListener(‘touchmove’,function(){
console.log(‘touchmove’);
});
div.addEventListener(‘touchend’,function(){;
//2.更新现在的时间，以比较记录开始触摸的时间。若<150ms,则满足条件。
//进行打印。当前存在两种 console,但两者之中只会在 End 处进行打印。
//去除某个参数和现在时间的差
console.timeEnd(‘time’);
console.log（‘Date.now（）-startTime’); //与 timeEnd 功能相同，以现在的时间减去上一次记录的时间，即两个时间的差，此即响应时间，算出来的是整数
});
实际演示：
刷新之后进行点击
time:101.435ms 08 tap事件.html:46
100 08 tap事件.html:47
由于打印需要耗费时间，此间相差0.1毫秒
进行刷新、点击
time:110.002ms 08 tap事件.html:46
110 08 tap事件.html:47
time:88.060 08 tap事件.html:46
90 08 tap事件.html:47
time:98.730ms 08 tap事件.html:46
104 08 tap事件.html:47
time:98.017ms 08 tap事件.html:46
90 08 tap事件.html:47
此时时间近乎相同.
根据自身的方式同样可以计算出两次之间的时间差。
不能滑动的演示
//在最初声明一个 time
/*1.记录开始触摸到屏幕的时间/
var startTime = 0;
var isMove = false;
startTime = Date.now(); //此相当于直接掉落对象，而不去初始化对象
console.time(‘time’);
});
div.addEventListener(‘touchmove’,function(){
isMove = true;
});
div.addEventListener(‘touchstart’,function(){
console.time(‘time’);
//此处的 time 仅作为记录时间
});
div.addEventListener(‘touchmove’,function(){
console.log(‘touchmove’);
});
div.addEventListener(‘touchend’,function(){;
//2.更新现在的时间，以比较记录开始触摸的时间。若<150ms,则满足条件。
//进行打印。当前存在两种 console ,但两者之中只会在 End 处进行打印。
//去除某个参数和现在时间的差
console.timeEnd(‘time’);
console.log（‘Date.now（）-startTime’); //与 timeEnd 功能相同，以现在的时间减去上一次记录的时间，即两个时间的差，此即响应时间，算出来的是整数
//console.log（‘Date.now（）-startTime);
/*1.肯定比 click 响应快
2.不能滑动*
满足以上条件才能算作 tap/
if(!isMove &&（Date.now()-startTime)<150）） {
//非 isMove，即没有滑动过。isMove 被设成 false，当为 false 时为没有滑动，当满足的条件为！false = true, 证明了未滑动，若 isMove = true，!true 即为 false,则不满足条件。满足未滑动并且满足 Date.now()-startTime)<150 条件，才能称之为 tap
//进行打印
console.log(‘tap’ ）;
}
//其他情况下应该清除
iMove = false;
startTime = 0; //方便下一次的点击
});
}
</script>
</body>
</html>
实际演示：
刷新之后进行点击
90 08 tap事件.html:46
tap 08 tap事件.html:46
490 08 tap事件.html:55
此时490并非 tap
进行滑动
124 08 tap事件.html:46
尽管此时小于150，但由于当前为滑动，同样不是 tap
综合两个条件即封装了比 click 更快速的事件，即 tap。
tap 自身并不能进行封装，但当前存在众多的第三方框架，例如 zepto (移动端 js库)，其中包含了 tap 事件。通过 js 库能够解决响应过慢的问题。
方案二：fastclick
含义：快速点击
在使用制作动画时，其中有表示快慢的部分。
作用：是一个非常快速的库，在移动浏览器发生介于轻敲及点击之间 的指令时，能够摆脱 300ms 的延迟。，使应用程序更加灵敏快捷。与 tap 达到的功能、效果相同。此插件引入后即可使 click 加快并使用 click .当 click 能够使用后便无必要使用tap。
一般进行移动端开发时都会使用的并非此库，此为另外一种解决方案。
三、移动端相关事件的演示
1.轮播图
衍生出上划下划左划右划 手势事件
2.移动端滑动效果
依靠 touch 相关事件，根据触摸位置的改变，改变对应元素的位移 translate
3.移动端轻触事件
即 tap
