# 移动端事件

1. touch 只有移动端才有touch事件

• touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指
• touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用 event.preventDefault() 阻止默认情况的发生：阻止页面滚动
• touchend：当手指离开屏幕时触发
• touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面 alert()一个提示框，此时会触发该事件，这个事件比较少用

触摸事件的响应顺序: ontouchstart > ontouchmove > ontouchend > onclick 300ms延时

Click 事件在手机端会出现大概 300ms 的延迟，实际的执行延迟要比这个大，因为浏览器的内核运行也需要消耗时间。延迟执行的原因是苹果最早在手机上做了一个事件，当双击页面的时候，页面放大。也就是说，在点击之后的 300ms 之内，如果没有再次出发点击，则认为是单击事件，如果再次触发则认为 是双击事件。

但目前，一般在手机 web 中，不允许缩放，也就没有双击事件，但是 click 延迟执行会影响用户体验

谷歌判断点击的条件是: 长按压long press的时间阈值为 700ms, 超过 700ms 就不再触发click事件

去除延迟: 有文档里面提到在 2014 年的 Chrome 32 版本已经把这个延迟去掉了，如果有一个 meta 标签：

<meta name="viewport" content="width=device-width">

即把 viewport 设置成设备的实际像素，那么就不会有这 300ms 的延迟，并且这个举动受到了 IE/Firefox/Safari(IOS 9.3)的支持，也就是说现在的移动端开发可以不用顾虑 click 会比较迟钝的问题

如果设置 initial-scale=1.0，在 chrome 上是可以生效，但是 Safari 不会：

<meta name="viewport" content="initial-scale=1.0">

还有第三种办法就是设置 CSS:

html{touch-action: manipulation;}

# touch事件对象

每个 touch 事件对象包含的属性如下:

• clientX： 触摸目标在视口中的 x 坐标
• clientY： 触摸目标在视口中的 y 坐标
• identifier： 标识触摸的唯一 ID
• pageX： 触摸目标在页面中的 x 坐标
• pageY： 触摸目标在页面中的 y 坐标
• screenX： 触摸目标在屏幕中的 x 坐标
• screenY： 触摸目标在屏幕中的 y 坐标
• target： 触摸的 DOM 节点目标
• touches： 当前位于屏幕上的所有手指的信息列表
• targetTouches： 位于当前 DOM 元素上手指的信息列表
• changedTouches： 涉及当前事件手指的列表