<iframe src="https://hammerjs.github.io/" width="100%" height="800px"></iframe>

开始

Hammer 是一个开源库，可以识别通过触摸、鼠标和 pointerEvents 做出的手势。 它没有任何依赖项，而且很小，只有 7.34 kB 缩小 + gzip ！

• 缩小代码 （v2.0.8）
• 未压缩代码 （v2.0.8）
• 更改日志
• 在 GitHub 上浏览源代码
• 寻找 1.1 版本？你可以在这里找到它。

用法

它易于使用，只需包含库并创建一个新实例即可。

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

默认情况下，它会添加一组 、 、 、 水平 和 ，以及 多点触控和识别器。默认情况下，捏合和旋转识别器处于禁用状态 因为它们会阻止元素，但您可以通过调用以下命令来启用它们：tap``doubletap``press``pan``swipe``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 });

此外，建议使用 viewport meta 标记，它通过禁用 双击/捏合缩放。支持 touch-action 属性的较新浏览器不需要此功能。

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

上面的示例创建了一个包含 a 和 手势的实例。识别器实例 create 是按照添加顺序执行的，并且当时只能识别一个。pan``quadrupletap

请参阅有关 recognizeWith 和 requireFailure 的页面 更多细节。

维护方式

Hammerjs 及其相关库完全由志愿者贡献者开发，但目前处于低维护模式。

很多爱使这个项目成为可能和开源。

建议在使用 hammer.js 时收听此循环。