移动端特有事件:触摸手势和tap-CFANZ编程社区

本文目录：

1.触摸事件（touch）
2.手势事件（swiper）
3.点击事件（tap）

触摸事件（touch）

1. touch是移动端的触摸事件而且是一组事件
1. touchstart 当手指触摸屏幕的时候触发
1. touchmove 当手指在屏幕来回的滑动时候触发
1. touchend 当手指离开屏幕的时候触发
1. touchcancel 当被迫终止滑动的时候触发（来电，弹消息）
1. 利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件

1.绑定事件
给页面的box元素绑定上触摸并来回滑动的事件

box.addEventListener('touchmove',function (e) {
     console.log('move');
     console.log(e);
});

2.事件对象：
在touch事件的回调函数中，事件对象有以下常用属性：

changedTouches：改变后的触摸点集合
targetTouches：当前元素的触摸点集合
touches：页面上所有触摸点集合

2.手势事件（swiper）

手势事件的判断除了需要有一个触摸点，还需要根据滑动距离来判断究竟是点击还是滑动，以及左滑动还是右滑动。
要理解手势事件，则需要先了解滑动的实现原理：
移动端中的滑动就是让触摸的元素随着手指的滑动做位置的改变，而元素位置的改变首选需要确定当前手指的坐标，触摸事件可以在每一个触摸点中会记录当前触摸点的坐标。比如e.touches[0] 表示手指正在屏幕上的第一个触摸点
e.touches[0]其中有详细记录位置信息的属性，如：

clientX clientY：触摸点基于浏览器窗口的坐标
pageX pageY ：触摸点基于页面的坐标
screenX screenY：触摸点基于屏幕的坐标

通过判断滑动距离是否大于某个设定值以及滑动的方向来实现手势事件的判定，实际项目开发中通常通过引用插件来实现。
下面代码通过原生的方式实现监听页面元素box的左右手势事件：

var bindSwipeEvent = function (dom, leftCallback, rightCallback) {
    var isMove = false;
    var startX = 0;
    var distanceX = 0;
    dom.addEventListener('touchstart', function (e) {
        startX = e.touches[0].clientX;
    });
    dom.addEventListener('touchmove', function (e) {
        isMove = true;
        var moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
    });
    dom.addEventListener('touchend', function (e) {
        /*滑动结束*/
        if (isMove && Math.abs(distanceX) > 50) {
            if (distanceX > 0) {
                rightCallback && rightCallback.call(this, e);
            } else {
                leftCallback && leftCallback.call(this, e);
            }
        }
        /*重置参数*/
        isMove = false;
        startX = 0;
        distanceX = 0;
    });
}
bindSwipeEvent(document.querySelector('.box'), function (e) {
    console.log(this);
    console.log(e);
    console.log('左滑手势');
}, function (e) {
    console.log(this);
    console.log(e);
    console.log('右滑手势');
});

3.点击事件（tap）

移动端click原生事件响应速度太慢，单次点击之后会有300ms的延时，为了减少这300ms的延迟，tap事件被很多框架（如zepto）封装，来减少这延迟问题， tap事件不是原生的，所以是封装的，那么具体是如何实现的呢？
主要考虑到下面两点：
按住的事件不能超过延时时间，因为长时间可能就是浏览器的复制、粘贴等操作了。
不能在页面中移动，移动是不能触发tap事件的。
移动浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕上快速点击两次，可以看到内容或者图片放大，再次双击，浏览器会将网页缩放至原始比例。
浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。

如何避免延迟

方法一：禁止缩放
<meta name="viewport" content="width=device-width user-scalable= 'no'">
在页面中设置以上这行代码可以有效的取消掉点击延迟，但是缺点是完全禁止掉了页面的双击缩放和放大功能
方法二：使用zepto.js
除了zepto.js，还有另外一种解决方案：引用fastclick.js插件，从而解决移动端click的延时问题。
方法三：fastclick.js
Github地址：https://github.com/ftlabs/fastclick
npm安装：npm install fastclick
cdn引入：https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
初始化FastClick实例
初始化FastClick实例建议在页面的DOM文档加载完成后。

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

类似Common JS的模块系统方式

var attachFastClick = require('fastclick');
attachFastClick(document.body);
//调用require('fastclick')会返回FastClick.attach函数。

使用needsclick过滤特定的元素
如果页面上有一些特定的元素不需要使用fastclick来立刻触发点击事件，可以在元素的class上添加needsclick:
<a class="needsclick">Ignored by FastClick</a>