hammer的初始化及移动端各种滑动

前言：本人对hammer了解不是很多，早做项目时遇到了手机端的一些滑动事件，特此分析下hammer的某些属性。

hammer.js是一款开源的移动端脚本框架，他可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。Hammer.js不需要依赖任何其他的js框架，并且整个框架非常小，v2.0.4版本只有3.96kb。

1、hammer.js引用

可直接引入文件，也可以引入CDN地址。在这里，为了方便，我引入了JQuery框架。

hammer的在线CDN地址为：<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>

2.hammer的事件绑定

hammer的事件绑定方法是新建一个Hammer对象，并传入要操作的DOM，必须使用原始DOM，即使用这两种方法获取DOM。

    var hammerObj=new Hammer(document.getElementById('main'));
    var hammerObj=new Hammer($('#main').get(0));

3、hammer支持的事件

pan事件

主要支持在当前dom区域内的一个手指放下并移动事件，即屏幕滑动事件，其中包括左滑动、右滑动、上滑动、下滑动，该事件还可以对以下事件进行监听或处理：

panstart：拖动开始、panmove：拖动过程、panend：拖动结束、pancancel：拖动取消、panleft：向左拖动、panright：向右拖动、panup：向上拖动、pandown：向下拖动

panstart事件

会在event对象中输出滑动开始的坐标

panmove事件

一次滑动会触发多次panmove事件，会在direction中输出方向，当direction等于16时，为向下滑动，当direction等于8时，为向上滑动，当direction等于4时，为向右滑动，当direction等于2时，为向左滑动。

panend事件

滑动结束，一次滑动只会执行一次，同样在direction中输出方向，当direction等于16时，为向下滑动，当direction等于8时，为向上滑动，当direction等于4时，为向右滑动，当direction等于2时，为向左滑动。

pancancel事件

滑动取消，不知道何时触发。

panleft事件

向左滑动，一次滑动多次触发，其中垂直上下滑动不会触发，滑动时向左有一定偏移量的时候会触发。

panright事件

向右滑动，一次滑动多次触发，其中垂直上下滑动不会触发，滑动时向右有一定偏移量的时候会触发。

panup事件

向上滑动，一次滑动多次触发，其中水平左右滑动不会触发，滑动时向上有一定偏移量的时候会触发。

pandown事件

向下滑动，一次滑动多次触发，其中水平左右滑动不会触发，滑动时向下有一定偏移量的时候会触发。

pinch事件

主要支持在当前dom区域内的多个手指（默认两个手指，多个手指需要单独设置）的相对移动和相向移动，该事件还可以对以下事件进行处理或者监听：

pinchstart：多点触控开始、pinchmove：多点触控过程、pinchend：多点触控结束、pinchcancel：多点触控取消、pinchin：多点触控时两手指距离越来越近(缩小)、pinchout：多点触控时两手指距离越来越远（放大），其触发事件如pan事件。

    var hammertime = new Hammer(document.getElementById("body"));
    hammertime.add(new Hammer.Pinch());
    hammertime.on("pinchin", function (e) {
        swit();
    });

Press事件（长按）

 

主要支持在当前的dom区域内触屏版本的点击事件，这个事件相当于PC端的Click事件，该不能包含任何的移动，最小按压时间为500毫秒，常用于我们在手机上用的“复制、粘贴”等功能，该事件分别对以下事件进行监听并处理：

pressup：按压事件离开时触发

该事件不存在pressdown事件，具体是否支持按压开始未知。

rotate事件

主要支持在当前的dom区域内，当两个手指或更多手指成圆型旋转时触发（就像两个手指拧螺丝一样）。该事件分别对以下事件进行监听并处理：

rotatestart：旋转开始、rotatemove：旋转过程、rotateend：旋转结束、rotatecancel：旋转取消  

swipe事件

主要支持在当前的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。

swipeleft：向左滑动、swiperight：向右滑动、swipeup：向上滑动、swipedown：向下滑动

该事件只有在垂直上下滑动或水平左右滑动时触发，即滑动时如果倾斜太大角度则不会触发，触发条件比较苛刻。

tap事件

主要支持在当前的dom区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。

注意

默认情况下pinch和rotate事件是被禁止的，可以通过以下代码开启它。

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

一般情况下，浏览器是禁止屏幕上滑下滑事件的，因为浏览器默认的是上下滑动滚动页面，若要允许识别器识别垂直方位或全部方位的 pan 和 swipe，可以这么写：

hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

 

另建议加上如下meta标签，防止doubletap 或 pinch 缩放了viewport：

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

 

4、hammer滑动事件执行多次处理方法

在滑动事件执行后，我们一般会执行一个函数或者对dom进行操作，hammer事件多次执行，有时候会使函数多次执行或多次dom操作，由于我现在做的项目滑动之后执行的操作是需要一段时间的，所以采用设置一个全局变量作为函数执行开关的方法进行阻止，hammer应该提供了自己的方法，但我还不知道，望知道的小伙伴可以告诉我。

<script type="text/javascript">
    var hammerObj=new Hammer(document.getElementById('main'));
    var _clock=true;
    function foo(){
        alert("OK");
        _clock=true;
    }
    hammerObj.on('panmove',function(event){
        if(_clock){
            _clock=false;
            foo();
        }
    });
</script>

 

但是这种方法只有在滑动后执行函数或操作存在一定时间才可以，比如alert()换成console.log（）就会多次输出，没有办法解决这个问题。

其实pan事件我们完全不需要使用panmove来实现，可以采用panend,同样可以输出不同方向然后进行判断，但pinchin（捏合）事件同样会多次执行，所以新的方法还需要寻找。。。