Hammer-移动端触屏插件

Hammer.js是一个可以实现移动端元素拖拽的库。

//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
var hammertime = new Hammer(document.getElementById("element"));
//为该dom元素指定触屏移动事件
hammertime.on("pan", function (ev) {
注意 pan 的位置可以替换成你想要的效果
其中

pan

   在指定的dom区域内，一个手指放下并移动事件，即触屏中的拖动事件。
   Panstart：拖动开始、Panmove：拖动过程、Panend：拖动结束、Pancancel：拖动取Panleft：向左拖动、Panright：向右拖动、Panup：向上拖动、Pandown：向下拖动

Pinch

   在指定的dom区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件。
    Pinchstart：多点触控开始、Pinchmove：多点触控过程、Pinchend：多点触控结束、Pinchcancel：多点触控取消、Pinchin：多点触控时两手指距离越来越近、Pinchout：多点触控时两手指距离越来越远

PinchArea可以被用在两种方式下:
1.设置一个pinch.target去为对应绑定的对象提供自动接口.
2.使用onPinchStarted,onPinchUpdated,onPinchFinished.
可以参考 PinchEvent.
属性:
enabled : bool
这个属性保存了当前绑定的对象是否接受手势触摸操作.
这个属性默认值是true.
pinch
pinch.target : Item
pinch.active : bool
pinch.minimumScale : real
pinch.maximumScale : real
pinch.minimumRotation : real
pinch.maximumRotation : real
pinch.dragAxis : enumeration
pinch.minimumX : real
pinch.maximumX : real
pinch.minimumY : real
pinch.maximumY : real
pinch提供了一个方便的方式去使得绑定的可见对象对手势做出反应.
pinch.target指定了一个可见对象的Id去拖拽.
pinch.active 如果目标可见对象当前是被拖拽了的话,该值被指定.
pinch.minimumScale 和 pinch.maximumScale 限制了可见对象的范围,但是并不是手势事件的缩放属性.
pinch.minimumRotation 和 pinch.maximumRotation 限制了可见对象的范围.旋转属性,单不是手势事件的旋转属性.
pinch.dragAxis指定了是否拖拽是被允许的.可以是Pinch.XAxis,Pinch.YAxis,Pinch.XAndYAxis.
pinch.minimum和 pinch.maximum 限制了目标可以沿着坐标轴被拖拽多远.
信号:
pinchFinished()
当手势触摸域检测到一个手势已经完成是,该信号被发射出来.
The pinch parameter (not the same as the pinch property) provides information about the pinch gesture, including the scale, center and angle of the pinch.
pinch参数(跟pinch的属性不一样)提供了关于手势的信息,包括缩放因子,中心点,以及角度.
通信句柄是onPinchFinished.
pinchStarted()
当手势触摸域检测到一个手势已经开始:两个触摸点已经被检测到了,并且两个手指已经移动离开了刚开始手指的位置,离开了一段距离,这个信号被发射出来.
pinch参数提供了关于触摸的相关参数(跟pinch属性不一样哟),包括缩放,中心点,以及触摸角度.pinchStarted信号发出的这一刻,这些值被重设成默认值,不管之前的手势结果:pinch.scale被设置为1.0,pinch.rotation被设置为0.0.手势过程中,pinchUpdated将报告从那些默认值出来的偏离值.
忽视手势,设置pinch.accepted属性为false.手势将被取消,并且没有进一步的事件被发送.
通信句柄是onPinchStarted.
pinchUpdated()
当触摸域检测到一个手势改变了时,这个信号被发射出来.
pinch参数提供了关于手势触摸的信息,包括缩放,中心点以及触摸角度.这些值反应了当且仅当开始当前手势时的改变,因此是不会被minimum和maximum限制了触摸属性的.
通信句柄是onPinchUpdated.

Press

   在指定的dom区域内触屏版本的点击事件，这个事件相当于PC端的Click事件，该不能包含任何的移动，最小按压时间为500毫秒，常用于我们在手机上用的“复制、粘贴”等功能。
     Pressup：点击事件离开时触发

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