移动端手势事件 hammer.JS插件

 

 

 

 

 

 

 

 

 

一、引入hammer.JS

1.下载地址：http://download.csdn.net/detail/webxiaoma/9872249 
2.官网地址：http://hammerjs.github.io/examples/ 
3.CDN链接：http://hammerjs.github.io/dist/hammer.min.js

二、用法

1.首先我们先写一个出发事件的DOM元素

HTML:

   <style type="text/css">
       html, body {
           width: 100%;
           height: 100%;
           margin: 0px;
           padding: 0px;
       }

       .test {
           width: 100%;
           height: 100%;
           background: red;
           text-align: left;
           color:white;
       }

   </style>
  <div id="test" class="test"></div>

 

2.我们创建一个新的hammer对象并且在初始化时指定要处理的dom元素

var hammertime = new Hammer(document.getElementById("test"));

 

3.为该dom元素指定触屏移动事件

hammertime.on("press", function (e) {                    document.getElementById("result").innerHTML += "按压超过500ms了";

});

 

三、注意点 重点内容

1.推荐使用视口元标记，通过禁用双引号/缩小缩放功能，可以更好地控制网页。

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

 

2.水平 pan和swipe和多点触控pinch和rotate识别。默认情况下，压缩和旋转识别器将被禁用，因为它们会使元素阻塞，但您可以通过调用以下方式启用它们： 
①方法一：

 hammertime.add(new Hammer.Pinch());
 hammertime.add(new Hammer.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 });

 

启用成功后在去调用该事件，否则该事件可能不会触发。 
另外我们也可以使用 remove(事件) 移除某个事件

hammertime.remove('rotate'); // 移除旋转手势事件

 

四、提供的事件

1、点击事件（也就是常说的tocuh事件）

选项	默认	描述
event	pan	事件名称
pointers	1	必需指针。0为所有指针。
threshold	10	识别前需要的最小平移距离
direction	DIRECTION_ALL	平移方向。

panstart 单手指按下时事件 
panmove 单手指移动时事件 
panend 单手指离开时事件 
pancancel 手势事件被移除是触发 
panleft 单手指向下左滑动时触发 
panright 单手指向右滑动时触发 
panup 单手指向上滑动时触发 
pandown 单手指向下滑动时触发

2.缩放事件 （需要手动开启 ammertime.get('pinch').set({ enable: true });）

选项	默认	描述
event	pinch	事件名称
pointers	2	必需的指针，最小为2。
threshold	0	识别前的最小比例

pinch 手指缩放触发 
pinchstart 手指缩放开始时触发 
pinchmove 手指缩放时触发 
pinchend 手指缩放结束后触发 
pinchcancel 手指缩放事件被清除时触发 
pinchin 手指向内缩放时触发 
pinchout 手指向外缩放时触发

3.按压(长按)事件

选项	默认	描述
event	press	事件名称
pointers	1	必需指针。0为所有指针。
threshold	9	按压时允许的最小移动。
time	251	压缩时间以毫秒为单位

press 手指按压时触发（默认按压251毫秒） 
pressup 手指按压结束时触发

4.旋转事件 (两个手指)

选项	默认	描述
event	rotate	事件名称
pointers	2	必需的指针，最小为2。
threshold	0	识别前的最小比例

rotate 旋转触发 
rotatestart 旋转开始时触发 
rotatemove 旋转时触发 
rotateend 旋转结束时触发 
rotatecancel 旋转被移除时触发

5.滑屏事件

选项	默认	描述
event	rotate	事件名称
pointers	1	必需的指针，最小为2。
threshold	10	识别前需要的最小距离。
direction	DIRECTION_ALL	平移方向。
velocity	0.3	识别之前所需的最小速度，单位为px / ms。

swipe 滑屏触发 
swipeleft 左滑屏时触发 
swiperight 右滑屏时触发 
swipeup 上滑屏时触发 
swipedown 下滑屏时触发

小提示：当调用Hammer()创建一个简单的实例时，平移和滑动识别器被配置为仅检测水平手势。你需要这样去在垂直方向去配置：

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

 

6.tap点击事件

选项	默认	描述
event	tap	事件名称
pointers	1	必需的指针
taps	1	所需的水龙头数量。
interval	300	多个水龙头之间的最大时间（以ms为单位）
time	250	最大按压时间（ms）。
threshold	2	在做点击时，允许一些小动作。
posThreshold	10	多个抽头之间的最大位置差异。

tap 点击事件 
doubletap 双击触发

重点内容 
以上事件中我们可以改变事件的默认状态，比如按压事件默认是251毫秒触发，我们可以改为1s后触发。

hammertime.get('press').set({ time:1000 });

五、事件对象

每个事件都存在事件对象：

hammertime.on("doubletap", function (e) {

   document.getElementById("result").innerHTML += e;
     var a = console.log(e);

});

 

事件对象中包含以下信息： 
Hammer触发的所有事件都会接收到包含以下属性的事件对象。

名称	值
type	事件名称 像panstart。
deltaX	X轴的移动。
deltaY	Y轴运动。
deltaTime	自第一次输入以来的总时间（毫秒）。
distance	距离移动
angle	角度移动。
velocityX	速度在X轴上，以px / ms为单位。
velocityY	Y轴上的速度，以px / ms为单位
velocity	Y轴上的速度，以px / ms为单位
direction	方向移动。匹配DIRECTION常数。
offsetDirection	方向从起点移开。匹配DIRECTION常数。
scale	多点触控时缩放。1单触。
rotation	多点触摸时已经完成的旋转（deg）。0单击。
center	多点触摸的中心位置，或只是单指针。
srcEvent	源事件对象，类型TouchEvent，MouseEvent或PointerEvent。
target	接收到事件的目标。
pointerType	主指针类型，可以是touch，mouse，pen或kinect。
eventType	事件类型，匹配INPUT常量。
isFirst	true 当第一个输入。
isFinal	true 当最后（最后）输入。
pointers	具有所有指针的数组，包括结束指针（touchend，mouseup）。
changedPointers	具有所有新/移动/丢失指针的数组。
preventDefault	参考srcEvent.preventDefault()方法。只有专家！