一、pc端事件在移动端的问题
移动设备主要特点是不配备鼠标，键盘也只是在需要输入的地方才会激活虚拟键盘。所以以前的pc端事件在移动端使用起来就没有那么好用，虽然部分仍然可以使用。
1. click事件的300ms延迟问题。
第一代iphone发布，由于那个年代所有的网页都是针对大屏的pc端设计的，iphone的Safari浏览器为了让用户浏览网页的时候可以浏览到整个网页，把viewport设置为960px(参考前面的文章)，好是好，但是由于缩放了整个页面，导致内容变得非常小，视力6.0的都不一定看得清楚。
所以Safari浏览器自带了一个当时看起来相当酷的一个功能：双击缩放。你双击页面的时候，浏览器会智能的缩放当前页面到原始大小。
双击缩放的原理就是，当你click一次之后，会经过300ms之后检测是否再有一次click，如果有的话，就会缩放页面。否则的话就是一个click事件。
所以，当你想执行click操作的时候，就感觉到了”卡顿”。如果点击之后100ms之后没有反应，基本就有卡顿的感觉。
2. dblclick事件失效
由于双击缩放的存在，pc端的dblclick事件在移动端也失效了。
二、移动端web新增 Touch（触摸）事件
随着触屏设备的普及，w3c为移动端web新增了touch事件。
最基本的touch事件包括4个事件：
1.touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
2.touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
3.touchend事件：当手指从屏幕上离开的时候触发。
4.touchcancel事件：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。
三：触摸事件还包含下面三个用于跟踪触摸的属性。
touches：表示当前跟踪的触摸操作的touch对象的数组。targetTouches：特定于事件目标的Touch对象的数组。（正在触摸当前 DOM 元素上的手指的一个列表。）changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组
四：每个Touch对象包含的属性：
1.Touch.identifier：
此 Touch 对象的唯一标识符。 一次触摸动作(我们指的是手指的触摸)在平 面上移动的整个过程中，该标识符不变。 可以根据它来判断跟踪的是否是同一次触摸过程，此值为只读属性。
2.Touch.screenX：
触点相对于屏幕左边沿的X坐标。只读属性。
3.Touch.screenY：
触点相对于屏幕上边沿的Y坐标。只读属性
4.Touch.clientX：
触点相对于可见视区(visual viewport)左边沿的X坐标。不包括任何滚动偏移。只读属性。
5.Touch.clientY：
触点相对于可见视区(visual viewport)上边沿的Y坐标。不包括任何滚动偏移。只读属性。
6.Touch.pageX：
触点相对于HTML文档左边沿的X坐标。当存在水平滚动的偏移时，这个值包含了水平滚动的偏移。只读属性。
7.Touch.pageY：
触点相对于HTML文档上边沿的Y坐标。当存在水平滚动的偏移时，这个值包含了垂直滚动的偏移。只读属性。
8.Touch.radiusX：
能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径。这个值的单位和 screenX 相同。只读属性。
9.Touch.radiusY：
能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径。这个值的单位和 screenY 相同。只读属性。
10.Touch.rotationAngle：
它是这样一个角度值：由radiusX 和 radiusY描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面。只读属性。
11.Touch.force：
手指挤压触摸平面的压力大小，从0.0(没有压力)到1.0(最大压力)的浮点数。只读属性。
12.Touch.target：
当这个触点最开始被跟踪时(在 touchstart 事件中)，触点位于的HTML元素。哪怕在触点移动过程中，触点的位置已经离开了这个元素的有效交互区域，或者这个元素已经被从文档中移除。需要注意的是，如果这个元素在触摸过程中被移除，这个事件仍然会指向它，但是不会再冒泡这个事件到 window 或 document 对象。因此，如果有元素在触摸过程中可能被移除，最佳实践是将触摸事件的监听器绑定到这个元素本身，防止元素被移除后，无法再从它的上一级元素上侦测到从该元素冒泡的事件。只读属性。
五：示例
下面的案例结合了touchstart，touchmove，touchend三个Touch事件实现拖拽改变进度条的进度。
详细代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>进度条</title><style>.d-flex {display: -ms-flexbox !important;display: flex !important;}.align-items-center {-ms-flex-align: center !important;align-items: center !important;}/* 清除浮动 */.clearfix::after {display: block;clear: both;content: "";}#progress-bar-module {padding: 10%;color: #fff;text-align:center;}#current-play-time {float: left; width: 10%;font-size: 14px;text-align: right;}#progress-bar-box {background-color: #666;width: 90%;height: 1.5px;border-radius: 50px;margin: auto;border: 0px;}#progress-bar {width: 0%;height: 1.5px;border-radius: 50px;background-color: #fff;}#progress-bar-point {height: 6px;width: 6px;border-radius: 50%;cursor: pointer;background-color: #fff;}#end-play-time {float: right;width: 10%; text-align: left;font-size: 14px;}</style></head><body style="background-color: #000"><!-- 音乐控制器 --><!-- 进度条 --><div id="progress-bar-module" class="clearfix d-flex"><!-- 当前播放时间 --><div id="current-play-time">0%</div><!-- 进度条盒子 --><div class="progress-bar-item" style="width: 80%; margin: auto;"><!-- 进度条有效范围 --><div id="progress-bar-box" class="d-flex align-items-center"><!-- 进度条播放进度 --><div id="progress-bar"></div><!-- 进度条小圆点 --><div id="progress-bar-point"></div></div></div><!-- 音频总时长 --><div id="end-play-time">100%</div></div></body></html><script>//移动端触摸事件var progress_bar_point = document.getElementById('progress-bar-point')var progress_bar_box = document.getElementById('progress-bar-box')//移动端触摸屏幕时触发ontouchstartprogress_bar_box.ontouchstart = () => {progress_bar_point.style.width = '15px'progress_bar_point.style.height = '15px'//移动端拖拽时触发progress_bar_box.ontouchmove = (e) => {console.log(e)// 触点相对于HTML文档左边沿的X坐标。console.log(e.targetTouches[0].pageX)// 当前元素相对于 offsetParent 节点左边界的偏移像素值。console.log(progress_bar_box.offsetLeft)// 进度条的进度console.log(e.targetTouches[0].pageX-progress_bar_box.offsetLeft)//进度条总长度console.log(progress_bar_box.offsetWidth)progress_play = Number((e.targetTouches[0].pageX - progress_bar_box.offsetLeft) / progress_bar_box.offsetWidth) * 100if(progress_play > 100) return progress_play = 100;if(progress_play < 0) return progress_play = 0;document.getElementById('progress-bar').style.width = `${progress_play}%`;document.getElementById('current-play-time').innerHTML = `${parseInt(progress_play)}%`;}//移动端触摸屏幕结束后触发progress_bar_box.ontouchend = () => { progress_bar_point.style.width = '6px'progress_bar_point.style.height = '6px'}}</script>
