入门指南

Hammer是一个可以识别触摸、鼠标和点击事件等手势的开放源码类库。它没有任何依赖项并且很小，只有 7.34 kB 缩小 + gzip压缩!

2.0有什么新东西？

它是完全重写的，可重复使用的手势识别器，并通过尽可能使用触摸动作的CSS属性改进了对最近的移动浏览器的支持。同时还支持多个Hammer实例，因此可以实现多点触控。

用法

它很容易使用，只需包含库并创建一个新的实例。

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 });

此外，建议使用视口元标记，通过禁用双击/缩放缩放功能，可以更多地控制web页面。支持触摸操作属性的最新浏览器不需要这些功能。

<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 手势。您创建的识别器实例按照它们添加的顺序执行，并且当时只能识别一个。

看到这些页面关于 recognizeWith and requireFailure 更多详情。

团队

Hammerjs及其相关类库完全由志愿者贡献者开发。

Alexander Schmitz (项目领导)
Chris Thoburn
Jorik Tangelder (原创者，不活跃)

更多的热爱献给为了使这个项目成为可能和开源。

建议在使用hammer.js的时候监听这个循环。

编辑这个页面在 GitHub

概要

Hammer

Recognizers

Extensions

入门指南

2.0有什么新东西？

用法

更多的控制

团队