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文档