移动端开发-touch事件及其相关属性

1. 为什么移动端使用touch事件

习惯在电脑上写js代码的同学可能想问一个问题：为什么移动端要使用touch事件，mouse事件和click事件在手机上不能触发么？其实这个问题很容易解决。首先，这两类事件在移动端也可以触发，但分别有一些问题：移动端会多点触屏，不适合mouse ，而click事件在手机上有 300ms延迟（不是bug）。因此，在移动端绑定事件，最好使用专门为移动端设计的touch事件。

2. touch事件介绍

触摸事件有以下几种类型：touchstart,touchmove,touchend这三种用的比较多，还有不常用的touchcancel事件。当然 MDN上还介绍了touchenter,touchleave事件，具体适用的场景及兼容性如何还未做测试，感兴趣的可自行研究。

js中不同的事件类型，event对象包含的属性也有所差异。我们先了解几个TouchEvent涉及的对象。

提示：文中的demo都是在 chrome 模拟器，iPhone6s(iOS9.3.2) safari，iOS微信上运行，安卓的兼容性未做测试
Touch

Touch对象代表一个触点，可以通过event.touches[0]获取，每个触点包含位置，大小，形状，压力大小，和目标 element属性。

{
    screenX: 511, 
    screenY: