Hammer是一個(gè)開放源代碼庫(kù),可以識(shí)別由觸摸,鼠標(biāo)和pointerEvents做出的手勢(shì)。它沒(méi)有任何依賴性,并且很小,只有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ì)使元素阻塞,但是可以通過(guò)調(diào)用以下命令來(lái)啟用它們:
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)記,它通過(guò)禁用兩次點(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è)。
更多示例訪問(wèn) Hammer文檔