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