• ? Github Star: 24k^[1]

• ? 官網(wǎng)^[2]

1、Hammer.js 是什么？

Hammer.js 是一個開源的輕量級 JavaScript 庫，專門用于識別和處理移動設(shè)備上的觸摸手勢。它能夠識別包括點擊、雙擊、拖動、縮放、旋轉(zhuǎn)等多種手勢，可以在不依賴其他框架的情況下獨(dú)立使用，而且很輕量壓縮后僅 7.34KB。Hammer.js 的設(shè)計目的是簡化移動端開發(fā)中的手勢識別過程，提供高性能的交互體驗.

核心特性

• ? 手勢識別：提供了一系列預(yù)設(shè)的手勢識別器，如拖動、縮放、旋轉(zhuǎn)等，并且允許自定義新的手勢識別器。

• ? 事件處理：通過簡單的 API，開發(fā)者可以為特定的手勢綁定事件處理函數(shù)，實現(xiàn)自定義的交互邏輯。

• ? 性能優(yōu)化：進(jìn)行了性能優(yōu)化，減少不必要的計算并有效利用硬件加速，保證流暢的用戶體驗。

• ? 跨平臺支持：兼容多種移動設(shè)備和桌面瀏覽器，確保廣泛的應(yīng)用范圍.

2、應(yīng)用場景

Hammer.js 應(yīng)用于需要精細(xì)觸摸交互的移動 Web 應(yīng)用和游戲開發(fā)中。它可以用于實現(xiàn)圖片輪播、地圖縮放、游戲控制等功能。

3、快速開始

在項目中使用 Hammer.js ，需要通過 npm 或 yarn 將 Hammer.js 安裝。

npm install --save hammerjs
# 或
yarn add hammerjs

示例代碼中，使用 CDN 引入 Hammer.js。首先定義 DOM 結(jié)構(gòu)如下：

<div id="app">
  <div class="wrapper">
    <div class="square" id="tap">輕擊</div>
    <div class="square" id="doubleTap">雙擊</div>
    <div class="square" id="press">長按</div>
    <div class="square" id="swipe">滑動</div>
  </div>
</div>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"
  integrity="sha512-qRj8N7fxOHxPkKjnQ9EJgLJ8Ng1OK7seBn1uk8wkqaXpa7OA13LO6txQ7+ajZonyc9Ts4K/ugXljevkFTUGBcw=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script type="module" src="./index.js"></script>

創(chuàng)建 Hammer 對象，定義識別器和注冊回調(diào)事件。

const $ = e => document.querySelector(e)
// 輕擊事件
const tapManager = new Hammer.Manager($('#tap'))
// 定義觸發(fā)器
const tap = new Hammer.Tap({
  taps: 1
})
// 添加到 manager 中
tapManager.add(tap)
// 注冊回調(diào)
tapManager.on('tap', (e) => {
  e.target.classList.toggle('expand');
});

效果如下（具體實現(xiàn)回復(fù) “demo”獲?。?/p>

4、核心API

手勢識別事件

Hammer.js 支持多種手勢識別，以下是一些常用的識別器：

• ? Pan 事件：手指按下并移動，就是觸摸屏的拖動。包括 panstart、panmove、panend、pancancel以及方向性事件如panleft、panright、panup和pandown。

• ? Pinch 事件：當(dāng)兩根手指或多根手指相對移動或相向移動時觸發(fā)。包括 pinchstart、pinchmove、pinchend、pinchcancel 以及 pinchn（手指距離變近）和 pinchout（手指距離變遠(yuǎn)）事件

• ? Rotate 事件：當(dāng)兩根手指或更多手指呈圓形旋轉(zhuǎn)時觸發(fā)。包括 rotatestart、rotatemove、rotateend 和 rotatecancel 事件 。

• ? Press 事件：在指定的DOM對象中，進(jìn)行按壓的點擊事件，相當(dāng)于 PC 端的 click 事件，最小按壓時間為500ms。包括 pressup 事件 。

• ? Tap 和 Doubletap 事件：點按和雙擊手勢。

• ? Swipe 事件：快速滑動手勢，可以設(shè)置方向性，例如僅水平或垂直方向

Hammer.js 允許同時監(jiān)聽多個手勢、自定義識別器，并且可以通過 recognizeWith和 requireFailure 等方法來定義識別器之間的關(guān)系 。默認(rèn)情況下，pinch 和 rotate 識別器是禁用的，如果需要使用它們，可以通過設(shè)置 enable: true 來啟用 。

5、總結(jié)

Hammer.js，這個小巧的 JavaScript 庫讓移動設(shè)備上的手勢操作變得超簡單。不管是輕點、滑動還是捏合放大，它都能輕松識別，而且用起來特別方便。小伙伴們可以快速上手，給自己的項目加上各種酷炫的手勢功能。

祝好！

引用鏈接

[1] Github Star: 24k: https://github.com/hammerjs/hammer.js
[2] 官網(wǎng): https://hammerjs.github.io