Hammer是一個(gè)開放源代碼庫(kù),可以識(shí)別由觸摸,鼠標(biāo)和pointerEvents做出的手勢(shì)。它沒有任何依賴性,并且很小,只有7.34 kB壓縮+ gzip壓縮!
它很容易使用,只需包含庫(kù)并創(chuàng)建一個(gè)新實(shí)例。
var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
console.log(ev);
});
默認(rèn)情況下,它增加了一組tap,doubletap,press,水平 pan和swipe和多點(diǎn)觸控pinch和rotate識(shí)別。默認(rèn)情況下,收縮識(shí)別器和旋轉(zhuǎn)識(shí)別器是禁用的,因?yàn)樗鼈儠?huì)使元素阻塞,但是可以通過調(diào)用以下命令來啟用它們:
hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });
為pan和swipe識(shí)別器啟用垂直或所有方向:
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
另外,建議使用viewport元標(biāo)記,它通過禁用兩次點(diǎn)按/捏縮縮放將更多控制權(quán)返回到網(wǎng)頁(yè)。較新的支持touch-action屬性的瀏覽器不需要此功能。
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
您可以為實(shí)例設(shè)置自己的一組識(shí)別器。這需要更多的代碼,但是它使您可以更好地控制所識(shí)別的手勢(shì)。
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);
上面的示例創(chuàng)建了一個(gè)包含pan和quadrupletap手勢(shì)的實(shí)例。您創(chuàng)建的識(shí)別器實(shí)例將按其添加順序執(zhí)行,此時(shí)只能識(shí)別一個(gè)。
更多示例訪問 Hammer文檔