Hammer是一个开放源代码库,可以识别由触摸,鼠标和pointerEvents做出的手势。它没有任何依赖性,并且很小,只有7.34 kB压缩+ gzip压缩!
它很容易使用,只需包含库并创建一个新实例。
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元标记,它通过禁用两次点按/捏缩缩放将更多控制权返回到网页。较新的支持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);
上面的示例创建了一个包含pan和quadrupletap手势的实例。您创建的识别器实例将按其添加顺序执行,此时只能识别一个。
更多示例访问 Hammer文档