移动端事件

移动端事件类型

事件名称描述 包含touches数组

事件名称	描述	包含touches数组
touchstart	当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element	是
touchmove	当用户在触摸平面上移动触点时触发。事件的目标 element 和这个 touchmove 事件对应的 touchstart 事件的目标 element 相同，哪怕当 touchmove 事件触发时，触点已经移出了该 element 。	是
touchend	当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。已经被从触摸平面上移除的触点，可以在 changedTouches 属性定义的 TouchList 中找到。	是
touchenter	当触点进入某个 element 时触发。此事件没有冒泡过程。	是
touchleave	当触点离开某个 element 时触发。此事件没有冒泡过程。	是
touchcancel	当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。	是

PC端事件和移动端事件的区别

通过on的方式添加touch事件在谷歌模拟器下无效
通过on的方式添加事件会前后覆盖
鼠标事件在移动端可以使用，但有300毫秒的延迟

点击事件为什么会有延迟

  移动浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕上快速点击两次，可以看到内容或者图片放大，再次双击，浏览器会将网页缩放至原始比例。

  浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟

var div = document.getElementsByTagName("div")[0];
       div.addEventListener("touchstart", function() {
           console.log("触摸开始事件");
       });
       div.addEventListener("click", function() {
           console.log("这是一个普通的点击事件");
       });
       div.addEventListener("touchend", function() {
           console.log("触摸结束事件") 
       });

如何避免延迟

方法一：静止缩放

<meta name="viewport" content="width=device-width user-scalable= 'no'">
  使用这个方法必须完全禁用缩放来达到目的，虽然大部分移动端能解决这个延迟问题，但是部分苹果手机还是不行。

方法二：fastclick.js

  FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。

  第一步：在页面中引入fastclick.js文件。
  第二步：在js文件中添加以下代码
  在 window load 事件之后，在body上调用FastClick.attach()即可。
window.addEventListener(function(){ 
    FastClick.attach( document.body );
},false );

如果你项目使用了JQuery，就将上面的代码改写成：

$(function() {  
    FastClick.attach(document.body);  
});

方法三：使用touchmove模拟

点击事件一定会触发触摸开始和触摸结束事件（ 触摸开始和结束之间可能还有触摸移动是事件）
如果出触发触摸移动那么就不是点击事件
没有触发触摸移动事件 那么就是点击事件

var div = document.getElementsByTagName("div")[0];
        div.addEventListener("touchstart", function() {
            console.log("触摸开始事件");
        });
        div.addEventListener("click", function() {
            console.log("这是一个普通的点击事件");
        });
        var isMove = false;
        div.addEventListener("touchmove", function() {
            console.log("触摸滑动事件");
            isMove = true;
        });
        div.addEventListener("touchend", function() {
            console.log("触摸结束事件");
            if (!isMove) {
                console.log("这是一个模拟的点击事件");
            }
            isMove = false;
        });