Hammer.js移动端触摸手势JavaScript插件
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)的事件名(字符串形式)来作为参数。
requireFailure(otherRecognizer) 和 dropRequireFailure(otherRecognizer)
只有当其它识别器(otherRecognizer)无效时才执行该识别器。
移除这种联系时,只会移除当前识别器上的连接,而不是其它识别器(otherRecognizer)上的连接。
这两个方法都支持一个识别器组成的数组来作为参数。
如果识别器被添加到了Manager上,那么该方法也支持将其它识别器(otherRecognizer)的事件名(字符串形式)来作为参数。
事件
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就翻译到这里,剩余的几个页面内容篇幅较少也较好读懂,请自行查阅和理解。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论