移动端事件

一、事件定义及分类

1. click事件

单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟

 

2. touch类事件

触摸事件，有touchstart touchmove touchend touchcancel 四种之分

touchstart：手指触摸到屏幕会触发

touchmove：当手指在屏幕上移动时，会触发

touchend：当手指离开屏幕时，会触发

touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

 

3. tap类事件

触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap: 手指碰一下屏幕会触发

doubleTap: 手指双击屏幕会触发

 

4. swipe类事件

滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分

swipe：手指在屏幕上滑动时会触发

swipeLeft：手指在屏幕上向左滑动时会触发

swipeRight：手指在屏幕上向右滑动时会触发

swipeUp：手指在屏幕上向上滑动时会触发

swipeDown：手指在屏幕上向下滑动时会触发

 

二、代码库：

1、Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

2、HammerJS是一个开源的库，可以识别由 touch, mouse 和 pointerEvents 触发的系列手势。它非常小巧，压缩后仅有3.96kb，并没有多余的脚本依赖。

在hammer.js框架当中，为我们提供的几个方法是：

Pan   单指 触碰（可以进行轻微的摩擦）  一个手指就能够触发 阈值10，包含了panstart、panmove、panend、pancancel、panleft、panright、panup、pandown

Pinch 两个手指头  捏~ 在识别之前最小的值是0，包含了pinchstart、pinchmove、pinchend、pinchcancel、pinchin （用于缩小）、pinchout （用于放大）

Press 单指 长按 500毫秒以上才可以 运动最小距离5 只有press事件

Rotate 两只手指头 默认旋转角度0，包含了rotatestart、rotatemove、rotateend、rotatecancel

Swipe 单指 滑动 阈值10 大于0.65px/ms的速度才可以触发，包含了swipeleft、swiperight、swipeup、swipedown

Tap 两下的轻敲 两次的差异在10之内 间隔在300毫秒之内 一次按下的时间不大于250ms 才可以触发

 

三、简易实现

(function () {
    var coord={},
        start={},
        el;

    document.addEventListener('touchstart', touchStart);
    document.addEventListener('touchmove',touchMove);
    document.addEventListener('touchend',touchEnd);
    document.addEventListener('touchcanel',touchCancel);

    function newEvent(type){
        return new Event(type,{ bubbles: true,cancelable: true});
    }

    function touchCancel () {
        coord = {}
    }

    function touchStart(e){
        var c = e.touches[0];
        start = {
            x: c.clientX,
            y: c.clientY,
            time: Date.now()
        };
        el= e.target;
        el='tagName' in el ? el : el.parentNode;
    }

    function touchMove(e){
        var t = e.touches[0];
        coord = {
            x: t.clientX - start.x,
            y: t.clientY - start.y
        }
    }

    function touchEnd(){
        var touchTimes = Date.now() - start.time,
                c = 250 > touchTimes && Math.abs(coord.x) > 20 || Math.abs(coord.x) > 80,
                s = 250 > touchTimes && Math.abs(coord.y) > 20 || Math.abs(coord.y) > 80,
                left = coord.x < 0,
                top = coord.y < 0;
        if (250 > touchTimes && (isNaN(coord.y) || Math.abs(coord.y)) < 12 && (isNaN(coord.x) || Math.abs(coord.x) < 12)) {
            el.dispatchEvent(newEvent('tap'));
        }else if(750<touchTimes && (isNaN(coord.y) || Math.abs(coord.y)) < 12 && (isNaN(coord.x) || Math.abs(coord.x) < 12)){
            el.dispatchEvent(newEvent('longTap'));
        }
        c ? el.dispatchEvent(left ? newEvent('swipeLeft') : newEvent('swipeRight')) : s && el.dispatchEvent(top ? newEvent('swipeUp') : newEvent('swipeDown'));

        coord={};
    }
}());

 

文档：

http://www.swiper.com.cn/demo/index.html

http://hammerjs.github.io/examples/