web移动端触屏事件

1.移动端与pc端的区别

移动端没有鼠标，自然也没有鼠标事件。所以onmousedown之类的事件监听在移动端时无效的。
移动端为了响应双击事件，onclick事件有300ms的延迟，因为要看看接下来的300ms有没有再次点击，有的话视为双击，没有的话视为单击。
下面的代码可以验证当前手机上onclick事件的延迟（在没有设置viewport的时候运行）

2.touch事件

touch事件没有延迟，它是移动端特有的，，pc端不支持
他有以下几个事件：
touchstart：开始触屏事件
touchmove：手指滑动事件（持续触发）
touchstend：触屏结束事件
touchcancal：触屏意外中断事件（手机中途来电？）

基本用法：

如果在touchstart中阻止了默认事件，则onlcik事件不会被触发(阻止默认事件不要挂载到document上，浏览器可能不支持)

3.touchEvent事件对象

touchEvent事件对象描述了当前事件中的一系列信息

e.touches：当前屏幕上所有触摸点的列表
targetTouches：当前对象上所有触摸点的列表
changeTouches：触发事件时改变的触摸点的集合
每个touch事件包含下面的属性：
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标。

4.onclick事件延迟的处理

实际开发中300ms的延迟让用户的体验非常不好，我们自然要把延迟去除

方法一： 更改默认视口宽度

方法二：禁用缩放（移动端双击事件是为了缩放屏幕，如果通过meta标签禁用了屏幕缩放，双击事件就失效了，onclick延迟自然也就没有了）

PS:这两个属性一般在设置viewport的时候都是同时存在的，这里列出来只是证明他们单独存在都能取消click的延迟

方法三：fastclick
原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉
步骤：引入fastclick文件，在页面成功加载后，执行FastClick.attach()函数，并传入相应的dom元素
缺点: 脚本相对较大