移動端手勢完美實現，Hammer介紹

花落水流紅，閑愁萬種，無語怨東風。

Hammer介紹

Hammer庫是一個移動端手勢庫，移動端的手勢操作（比如touch，tap，拖動，滑動等等）都可以用這個庫，而我們不用關心，它的底層方案具體是怎麼實現的。我們知道手勢的操作可以很複雜，比如縮放，長按等等。 而這個庫都幫我們都做好了，並且它非常的輕量，壓縮後只有7.34kb。

使用方法

非常簡單：

第一步是拿到你要操作的元素：

var myElement = document.getElementById(myElement);

第二步是實例化Hammer對象：

var mc = new Hammer(myElement);

第三步是監聽你的手勢事件：

mc.on("panleft panright tap press", function(ev) { myElement.textContent = ev.type +" gesture detected."; });

手勢事件

手勢事件具體有哪些？

第一類是平移：

pan

panstart

panmove

panend

pancancel

panleft 往左平移

panright 往右平移

panup

pandown

第二類是縮放類

pinch

pinchstart

pinchmove

pinchend

pinchcancel

pinchin

pinchout

第三類是按住

ress

pressup

第四類是旋轉

rotate

rotatestart

rotatemove

rotateend

rotatecancel

...

還有一些，我就不一一介紹了。

自定義手勢事件

除了API上的一些手勢事件，還支持自定義的事件，比如點擊4下才觸發一個事件。

第一步：實例化一個Hammer.Manager對象

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);```javascript## 查看事件對象```javascriptmc.on(pinch pinchin pinchout hammer.input, function(ev) { console.log(ev);});

上面的代碼中ev是我們的事件對象，可以在控制台查看它具體包含了哪些對象。

比如看它的事件類型：

更多查看：

Getting Started - Hammer.js?

hammerjs.github.io

推薦閱讀：