Hammer.js

实现多点触控的javascript库

Hammer.js 2.0 Build Status

Visit hammerjs.github.io for documentation.

You can get the pre-build versions from the Hammer.js website, or do this by yourself running npm install -g grunt-cli && npm install && grunt build

Hammer.js 2.0 Build Status

访问 hammerjs.github.io 查看文档。

你可以从 Hammer.js 网站获取预编译的版本,或者直接执行 npm install -g grunt-cli && npm install && grunt build

入门

Hammer 是一个可以识别由触摸,鼠标,指针引发的手势的开源库。Hammer 没有任何的依赖项,并且很小,gzip 压缩下只有 3.96 kB 。

使用

Hammer 的使用是很简单的,只需引入库文件然后创建一个新的实例:

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

默认情况下,它增加了一系列的 tap, doubletap, press, 水平 panswipe,以及多点触控 pinchrotate 识别器。 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 标签也是被推荐加上去的,通过禁用双击/多点触控给我们对页面更多的控制权。很多支持触摸事件的现代浏览器是不需要这个的。

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

上面的例子创建了一个包含 panquadrupletap 手势的实例。你创建的识别器实例按照他们被创建的顺序被执行,同一时间只能识别一个。

查看关于 recognizeWithrequireFailure 的页面获取更多信息。

浏览器/设备 支持

不要担心你的浏览器或系统没有被列在这里,它很可能会工作!IE8 及以下的浏览器是不支持的。

awesomes-cn

讨论区