移动端中的touch事件

在pc端的事件中，我们常用mousemove、mousedown、mouseup表示鼠标移动、鼠标点下、鼠标松开事件。但是在移动端中这些事件是没办法操作的。那么，移动端处理上面相应事件的操作就需要借助我们接下来要讲的。
首先，来介绍下移动端事件与PC端事件的差异：
1、pc端的mousemove、mouseup、mousedown等事件在移动端会失效
2、pc端的click事件可以使用，但会有300ms延迟
延迟的原因：手机浏览器会有放大和缩小的功能，当用户在屏幕上点击两次之后，浏览器会触发放大或缩小的功能，因此浏览器已经做了一次处理。当触摸一次后，在300ms中又触摸第二次，说明这是触发放大或缩小功能，否则就是click事件。
特殊情况：当用户设置viewport并禁止缩放时，大部分浏览器都能禁止300ms延迟，但是在微信或qq上仍会发生，因为他们使用的是内嵌的webview。

一、touch手势事件
touchstart 手指按下触发
touchmove 手指移动触发
touchend 手指离开触发
touchcancel 事件被打断时触发（打电话）

二、事件执行的顺序
touchstart -> touchmove -> touchend ->click

三、touchEvent对象
与pc端相比多了3个touchList属性：
1、touches 当前位于屏幕上的所有手指的一个列表
2、targetTouches 位于当前DOM元素上的手指的一个列表
3、changedTouches 保存状态改变的手指对象的一个列表
每个TouchList中都会有很多Touch对象，通过Touch对象可以得到我们想要的属性，比如pageX相对于页面左边的距离、pageY相对于页面上面的距离、clickX相对于浏览器左边的距离、clickY相对于浏览器上边的距离、radiusX、radiusY手指触摸的范围

四、实际应用—— 移动端点击屏幕时出现跟随的原点
HTML代码部分：

    <div id="box" style="display: none;"></div>
    （当点击屏幕时，这个原点才会出现，所以先将原点隐藏）

CSS样式：
#box{
width: 50px;
height: 50px;
background-color: chartreuse;
border-radius: 50%;
position: absolute;//原点是移动的，所以一定要记得设置
}
JS代码部分：
var box = document.querySelector(‘#box’);
//事件是由document触发的
document.addEventListener(‘touchstart’,function(e){
box.style.display = “block”;
box.style.left = (e.changedTouches[0].pageX - box.offsetWidth/2 )+ “px”;
box.style.top =(e.changedTouches[0].pageY - box.offsetHeight/2) + “px”;
})
document.addEventListener(‘touchmove’,function(e){
box.style.left = e.changedTouches[0].pageX - box.offsetWidth/2 + “px”;
box.style.top = e.changedTouches[0].pageY - box.offsetHeight/2 + “px”;
})
document.addEventListener(‘touchend’,function(e){
box.style.display = “none”;
})