Hammer.js移动端触摸手势JavaScript插件

Question

Hammer.js是一个专门用于控制、定制手势的轻量级JavaScript框架，可以识别出常见的触摸、拖动、长按、缩放等手势。支持Android、BlackBerry、iOS及Windows触屏设备。

介绍

Hammer是一个开源免费的javascript插件，可以识别移动设备的触摸、拖放等操作，同时兼容PC个人电脑上面的鼠标点击和鼠标响应事件，他轻量级和简约，压缩版本就只有一个文件，大小为3.96K。

• Minified code (v2.0.4)
• Uncompressed code (v2.0.4)
• Changelog
• Browse the source on GitHub
• Looking for the 1.1 version? You can find it here.

使用方法

Hammer非常易于使用和调用，只包括一个基本的js文件，下面是调用的一个基本实例。

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
    console.log(ev);
});

默认情况下，它增加了一套tap, doubletap, press, 水平方向 pan 和 swipe,和多点触控中的pinch 和 rotate 触发器。pinch 和rotate 的识别是默认情况下是禁用的因为他们会使闭锁元件，但你可以通过下面的方法调用：

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

使垂直或所有方向的pan and swipe识别器：

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

同时视口meta标签建议，它提供了更多的控制回网页禁用 doubletap/pinch。最近的浏览器支持触摸操作属性不需要这个。

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

更多的控制

你可以设置你的自己的一套识别您的实例。这需要更多的代码，但它给你的，被认可的手势更 控制。

var mc = new Hammer.Manager(myElement, myOptions);

mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );

mc.on("pan", handlePan);
mc.on("quadrupletap", handleTaps);

上面的示例创建包含pan和一个quadrupletap手势。你 识别实例创建被他们添加的顺序执行，而只有一个可以同时识别。

See the pages about the recognizeWith and requireFailure for more details.

提示和技巧

事件代表团和DOM事件

Hammer是能够触发DOM事件与选项domevents:true。这将给你的方法stoppropagation()，所以你可以使用事件delgation。Hammer将不会解除绑定的事件。

尽量避免垂直平移/刷卡

垂直平移用于滚动页面，和一些（老）浏览器不发送事件所以Hammer不能够识别这些手势。一个选择会做同样的动作提供了另一种方式。

在一个真实的设备的测试

有时Hammer只需要一些微调，滑动速度或其他一些阈值一样。同时， 更好的性能在较慢的设备，你应该尽量简单 回调的可能。jankfree.org有篇关于如何提高性能。

删除Windows Phone的tap highlight

Windows手机上有一个小tap highlight IE11 IE10和突出，当你点击一个元素。添加meta标签 删除这个。

<meta name="msapplication-tap-highlight" content="no" />

无法选中文字

使用Hammer以后，用户无法通过长按选中网页中的文字，这和拖放的操作相违背。

如果你关心的文本选择和桌面的经验不多，你可以简单地删除 此选项从缺省值。确保你在创建一个实例。

浏览器/设备的支持

如果你的浏览器或操作系统不上市，别担心，它可能会工作吗！ Internet Explorer 8以上不。

浏览器有触摸动作的原生支持可能改进的经验，然后浏览器看到 不行。触摸操作页更多的细节。

Browser	Pan	Pinch	Press	Rotate	Swipe	Tap	Multi-user	Touch-action
Windows Phone 8 – IE10	♥	♥	♥	♥	♥	♥	♥	♥
Android 2.3 – browser	♥		♥		♥	♥
Android 2.3 – FireFox	♥	♥	♥	♥	♥	♥	♥
Android 4.x – browser	♥	♥	♥	♥	♥	♥	♥
Android 4.4 – browser	♥	♥	♥	♥	♥	♥	♥	♥
Android 4 – Chrome	♥	♥	♥	♥	♥	♥	♥	♥
Android 4 – Opera	♥	♥	♥	♥	♥	♥	♥	?
Android 4 – FireFox	♥	♥	♥	♥	♥	♥	♥
Android 4 w/ mouse	♥	♥	♥	♥	♥	♥	♥	n/a
iOS 6	♥	♥	♥	♥	♥	♥	♥
iOS 7	♥	♥	♥	♥	♥	♥	♥
BlackBerry 10	♥	♥	♥	♥	♥	♥	?	?
FireFox OS (simulator)	♥	♥	♥	♥	♥	♥	?	?
Desktop – IE11	♥		♥		♥	♥		♥
Desktop – IE10	♥		♥		♥	♥		♥
Desktop – IE9	♥		♥		♥	♥
Desktop – Chrome	♥		♥		♥	♥		♥
Desktop – Firefox	♥		♥		♥	♥
Desktop – Opera	♥		♥		♥	♥		?
Chromebook	♥	♥	♥	♥	♥	♥	♥	?
Windows 8 /w pen	♥		♥		♥	♥	♥	n/a
Windows 8 /w touch	♥	♥	♥	♥	♥	♥	♥	n/a
Windows 8 /w mouse	♥		♥		♥	♥	♥	n/a
Windows 8 /w mixed	♥	♥	♥	♥	♥	♥	♥	n/a

API文档

Hammer

创建并返回一个带有系列默认识别器集合的Manager实例，该集合内包含了诸如 tap, doubletap, pan, swipe, press, pinch 和 rotate 识别器。你应该在初始化时执行它，其语法为：

Contructor(HTMLElement, [options])

参数里一个是你的页面元素，另一个是可选的识别器选项options，options会融入Hammer.defaults中去，当然，在Hammer.defaults.preset中定义的识别器集合也会被添加进来。

如果识别器选项options为空，那么初始化的时候不会有额外的识别器被添加进来：

var myElement = document.getElementById('hitarea');
var mc = new Hammer(myElement);

Hammer.defaults

创建实例时初始化的默认值，包括你定义的options选择器项。其属性包括：

touchAction: ‘compute’

其值可为 compute, auto, pan-y, pan-x 或 none 。默认选项会基于识别器为你选择一个正确值。

domEvents: false

让Hammer也能禁用DOM事件。若不禁用会有些慢，故默认是禁用的。如果你想实现事件委托，那么建议你将其设为true。

enable: true

接受一个boolean值, 或返回一个boolean值的函数。（官网就这样一句话，也没说具体啥作用，汗~）

cssProps: {….}

可以改善交互事件操作的系列css属性。更多详情可以查阅JSDoc。

preset: [….]

调用Hammer()的时候就安装了默认的识别器。如果建立一个新的Manager，这些将被跳过。

Hammer.Manager

Manager是所有识别器实例的容器，它为你的元素安装了交互事件监听器，并设置了触摸事件特性。

constructor(HTMLElement, [options])

参数为你的元素（HTMLElement）和选项（options），选项将合并到Hammer.defaults中去：

var mc = new Hammer.Manager(myElement);

你可以在选项中使用 recognizers 来设置一个初始化识别器，它是一个数组，写法如下：

var mc = new Hammer.Manager(myElement, {
    recognizers: [
        // RecognizerClass, [options], [recognizeWith, ...], [requireFailure, ...]
        [Hammer.Rotate],
        [Hammer.Pinch, { enable: false }, ['rotate']],
        [Hammer.Swipe,{ direction: Hammer.DIRECTION_HORIZONTAL }],
    ]
});

set(options)

修改一个Manager实例的选项，该方法是推荐使用的，它可以在需要的时候更新touchAction的值：

mc.set({ enable: true });

get(string), add(Recognizer) 和 remove(Recognizer)

添加一个新的Recognizer实例到Manager中，添加的顺序跟识别器执行的顺序一致。get方法会返回被添加的Recognizer实例。

get和remove方法都把一个（识别器中的）事件名或识别器实例来作为一个参数。Add 和 remove 方法也接受一个识别器数组来作为参数：

// both return instance of myPinchRecognizer
mc.get('pinch');
mc.get(myPinchRecognizer);

mc.add(myPinchRecognizer); // returns the recognizer
mc.add([mySecondRecogizner, myThirdRecognizer]);

mc.remove(myPinchRecognizer);
mc.remove('rotate');
mc.remove([myPinchRecognizer, 'rotate']);

on(events, handler) 和 .off(events, [handler])

监听由被添加的识别器触发的事件，或者移除那些绑定了的事件。参数中将事件通过空格隔开可处理多个事件：

mc.on("pinch", function(ev) {
    console.log(ev.scale);
});

stop([force])

停止当前交互会话的识别器（Stop recognizing for the current input session）。当使用force参数时，将强制立刻停止识别器执行周期。

destroy()

解绑所有交互事件并让manager失去作用，但它没有解绑任何dom事件监听器。

Hammer.Recognizer

每一个识别器都是从这个类中扩展出来的，所有识别器都会有一个enable选项，其值为boolean或者一个回调函数，用来启用/禁用非底层的识别器。

constructor([options])

只有选项作为参数：

var pinch = new Hammer.Pinch(); //创建一个识别器
mc.add(pinch); // 添加到Manager实例中

set(options)

在识别器实例中修改一个选项。该方法是推荐使用的，它可以在需要的时候更新touchAction的值。

recognizeWith(otherRecognizer) 和 dropRecognizeWith(otherRecognizer)

在当前识别器运行的时候同步运行所给的其它识别器（otherRecognizer），当你需要在最后结合pan和swipe手势时，或者需要同时pinch和ratate一个对象时，它会很有帮助。
移除这种联系时，只会移除当前识别器上的连接，而不是其它识别器（otherRecognizer）上的连接。
这两个方法都支持一个识别器组成的数组来作为参数。
如果识别器被添加到了Manager上，那么该方法也支持将其它识别器(otherRecognizer)的事件名（字符串形式）来作为参数。

了解更多recognizeWith

requireFailure(otherRecognizer) 和 dropRequireFailure(otherRecognizer)

只有当其它识别器（otherRecognizer）无效时才执行该识别器。
移除这种联系时，只会移除当前识别器上的连接，而不是其它识别器（otherRecognizer）上的连接。
这两个方法都支持一个识别器组成的数组来作为参数。
如果识别器被添加到了Manager上，那么该方法也支持将其它识别器(otherRecognizer)的事件名（字符串形式）来作为参数。

了解更多requireFailure

事件

hammer.input可以触发一个“秘密的”事件，它发生在每一个接收中的交互中，也让你能对原生的交互来做相关处理。它是一个小而强大的特性。

hammertime.on("hammer.input", function(ev) {
   console.log(ev.pointers);
});

事件对象

每一个Hammer触发的事件都会收到一个包含了如下属性的事件对象：

常量/Constants

这个建议查阅源码338行起，主要是用于标志事件轮廓，可通过上文“事件对象”的direction、offsetDirection等属性来获取。

所有常量都定义于Hammer对象中，因为它们都是二进制标识，你可以使用位运算来操作它们。MDN上有一些关于位运算的优秀文档。

方位/Directions

用于定义一个识别器的方位，并用来读取一个事件的对应值。

交互事件/Input Events

Hammer匹配所有交互 (mousedown, mousemove, touchmove, pointercancel)事件类型为如下值：

识别器状态/Recognizer States

由识别器在内部定义自己的状态：

工具/Utils

Hammer.on(element, types, handler)

addEventListener的封装，可以接受多个事件类型为参数：

Hammer.on(window, "load resize scroll", function(ev) {
    console.log(ev.type);
});

Hammer.off(element, types, handler)

如同Hammer.on，是removeEventListener的封装，也允许多个事件类型为参数。

Hammer.each(obj, handler)

遍历一个数组或对象：

Hammer.each([10,20,30,40], function(item, index, src) { });
Hammer.each({a:10, b:20, c:30}, function(item, key, src) { });

Hammer.merge(obj1, obj2)

把obj2的属性混到obj1中去，不过obj1的已有属性不会被重写：

var options = {
    b: false
};

var defaults = {
    a: true,
    b: true,
    c: [1,2,3]
};
Hammer.merge(options, defaults);

// options.a == true
// options.b == false
// options.c == [1,2,3]

Hammer.extend(obj1, obj2)

把obj2的属性扩展到obj1中去，不过obj1的已有属性会被重写：

var obj1 = {
    a: true,
    b: false,
    c: [1,2,3]
};

var obj2 = {
    b: true,
    c: [4,5,6]
};
Hammer.extend(obj1, obj2);

// obj1.a == true
// obj1.b == true
// obj1.c == [4,5,6]

Hammer.inherit(child, base, [properties])

简单的类继承：

function Animal(name) {
    this.name = name;
}

function Dog() {
    Animal.apply(this, arguments);
}

Hammer.inherit(Dog, Animal, {
    bark: function() {
        alert(this.name);
    }
});

var dog = new Dog('Spaikie');
dog.bark();

Hammer.bindFn(fn, scope)

Function.bind的简化形式：

function myFunction(ev) {
    console.log(this === myContext); // is true
}

var myContext = {
    a: true,
    b: false
};

window.addEventListener('load', Hammer.bindFn(myFunction, myContext), false);

Hammer.prefixed(obj, name)

获取浏览器的（前缀）属性值：

Hammer.prefixed(document.body.style, 'userSelect');
// returns "webkitUserSelect" on Chrome 35

关于hammer的API就翻译到这里，剩余的几个页面内容篇幅较少也较好读懂，请自行查阅和理解。