前端Hammer.js用法快速上手入門教程
更新時間：2026年06月06日 10:50:30 作者：全棧前端老曹
hammerJS是一個開源的,輕量級的觸屏設備javascript手勢庫,它可以在不需要依賴其他東西的情況下識別觸摸,鼠標事件,這篇文章主要介紹了前端Hammer.js用法快速上手入門的相關(guān)資料,需要的朋友可以參考下
引言：為什么你需要 Hammer.js？
各位前端老鐵，大家好！我是你們的老朋友老曹，今天來給大家講一個讓移動端交互變得簡單到爆炸的神器——Hammer.js！
移動端開發(fā)的痛點，老曹我都懂！手指在屏幕上滑來滑去，各種手勢操作，原生JS寫起來那叫一個酸爽。什么 touchstart、touchmove、touchend，寫完一堆代碼才發(fā)現(xiàn)，這還只是最基礎(chǔ)的滑動，縮放、旋轉(zhuǎn)、雙擊這些高級操作怎么辦？寫死我算了！
這時候，我們的救世主 Hammer.js 就出現(xiàn)了！它就像一個專業(yè)的手勢識別大師，幫你把所有復雜的觸摸邏輯都封裝好了，你只需要調(diào)用幾個簡單的API，就能實現(xiàn)各種炫酷的手勢操作。簡直就是前端界的"懶人神器"！
學習目標：學完這篇你就是手勢大師
- ? 理解 Hammer.js 的核心概念和工作原理
- ? 掌握基本手勢識別（點擊、滑動、縮放等）
- ? 學會自定義手勢識別器和配置選項
- ? 避開10大常見坑點，成為真正的"錘子"高手
- ? 實戰(zhàn)項目中靈活運用 Hammer.js
1. Hammer.js 基礎(chǔ)概念詳解
1.1 什么是 Hammer.js？
Hammer.js 是一個開源的 JavaScript 庫，專門用于識別觸摸設備上的手勢。它支持幾乎所有常見的手勢操作，包括點擊、滑動、縮放、旋轉(zhuǎn)等等。
?? 觸摸設備
↓
?? Hammer.js 引擎
↓
?? 手勢識別結(jié)果
↓
?? 前端應用響應1.2 核心組件介紹
| 組件 | 說明 | 用途 |
|---|---|---|
Manager | 手勢管理器 | 管理所有的識別器 |
Recognizer | 識別器 | 識別特定手勢 |
Input | 輸入源 | 處理原始觸摸事件 |
TouchAction | 觸摸行為 | 控制瀏覽器默認行為 |
1.3 支持的手勢類型
// Hammer.js 支持的十大手勢類型
const gestures = {
tap: '點擊', // 短時間觸摸后離開
doubletap: '雙擊', // 快速兩次點擊
press: '長按', // 長時間觸摸
swipe: '滑動', // 快速滑動
pan: '拖拽', // 拖拽移動
pinch: '縮放', // 雙指縮放
rotate: '旋轉(zhuǎn)', // 雙指旋轉(zhuǎn)
horizontal: '水平', // 水平方向限定
vertical: '垂直', // 垂直方向限定
all: '全部' // 所有方向
};
2. 安裝與引入：別再搞錯了！
2.1 安裝方式
# npm 安裝（推薦） npm install hammerjs # yarn 安裝 yarn add hammerjs # CDN 引入 <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
2.2 引入方式
// ES6 模塊引入
import Hammer from 'hammerjs';
// CommonJS 引入
const Hammer = require('hammerjs');
// 瀏覽器全局引入（CDN）
// 直接使用 window.Hammer
2.3 基礎(chǔ)使用示例
<!DOCTYPE html>
<html>
<head>
<title>Hammer.js 基礎(chǔ)示例</title>
<style>
#myElement {
width: 200px;
height: 200px;
background-color: #3498db;
margin: 50px auto;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
user-select: none;
}
</style>
</head>
<body>
<div id="myElement">Touch me!</div>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
<script>
// 獲取目標元素
const element = document.getElementById('myElement');
// 創(chuàng)建 Hammer 實例
const mc = new Hammer(element);
// 添加手勢監(jiān)聽
mc.on('tap', function(ev) {
element.style.backgroundColor = '#e74c3c';
element.textContent = 'Tapped!';
setTimeout(() => {
element.style.backgroundColor = '#3498db';
element.textContent = 'Touch me!';
}, 500);
});
</script>
</body>
</html>
3. 基本手勢實戰(zhàn)：從零開始玩轉(zhuǎn)手勢
3.1 點擊手勢 (Tap)
// 基礎(chǔ)點擊手勢
const element = document.getElementById('tapElement');
const mc = new Hammer(element);
mc.on('tap', function(ev) {
console.log('點擊事件觸發(fā):', ev);
console.log('點擊坐標:', ev.center);
});
// 自定義點擊配置
const tapRecognizer = new Hammer.Tap({
taps: 2, // 點擊次數(shù)
interval: 300, // 多次點擊間隔
time: 250, // 點擊持續(xù)時間
threshold: 2 // 識別閾值
});
mc.add(tapRecognizer);
3.2 滑動手勢 (Swipe)
const swipeElement = document.getElementById('swipeElement');
const swipeMc = new Hammer(swipeElement);
// 啟用所有方向的滑動
swipeMc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
swipeMc.on('swipeleft', function(ev) {
console.log('向左滑動');
});
swipeMc.on('swiperight', function(ev) {
console.log('向右滑動');
});
swipeMc.on('swipeup', function(ev) {
console.log('向上滑動');
});
swipeMc.on('swipedown', function(ev) {
console.log('向下滑動');
});
3.3 拖拽手勢 (Pan)
const panElement = document.getElementById('panElement');
const panMc = new Hammer(panElement);
// 啟用所有方向的拖拽
panMc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
let startX = 0, startY = 0;
panMc.on('panstart', function(ev) {
startX = panElement.offsetLeft;
startY = panElement.offsetTop;
});
panMc.on('panmove', function(ev) {
const deltaX = ev.deltaX;
const deltaY = ev.deltaY;
panElement.style.left = (startX + deltaX) + 'px';
panElement.style.top = (startY + deltaY) + 'px';
});
panMc.on('panend', function(ev) {
console.log('拖拽結(jié)束');
});
4. 高級手勢：縮放與旋轉(zhuǎn)的魔法
4.1 縮放手勢 (Pinch)
const pinchElement = document.getElementById('pinchElement');
const pinchMc = new Hammer(pinchElement);
// 啟用縮放和旋轉(zhuǎn)
pinchMc.get('pinch').set({ enable: true });
pinchMc.get('rotate').set({ enable: true });
// 設置初始變換
let currentScale = 1;
let currentRotation = 0;
pinchMc.on('pinchstart', function(ev) {
console.log('縮放開始');
});
pinchMc.on('pinchmove', function(ev) {
// 計算縮放比例
const scale = currentScale * ev.scale;
// 應用變換
pinchElement.style.transform =
`scale(${scale}) rotate(${currentRotation + ev.rotation}deg)`;
});
pinchMc.on('pinchend', function(ev) {
// 更新當前狀態(tài)
currentScale *= ev.scale;
currentRotation += ev.rotation;
});
4.2 旋轉(zhuǎn)手勢 (Rotate)
const rotateElement = document.getElementById('rotateElement');
const rotateMc = new Hammer(rotateElement);
rotateMc.get('rotate').set({ enable: true });
let startRotation = 0;
rotateMc.on('rotatestart', function(ev) {
startRotation = getRotationFromTransform(rotateElement) || 0;
});
rotateMc.on('rotatemove', function(ev) {
const rotation = startRotation + ev.rotation;
rotateElement.style.transform = `rotate(${rotation}deg)`;
});
rotateMc.on('rotateend', function(ev) {
console.log('旋轉(zhuǎn)結(jié)束');
});
// 輔助函數(shù)：獲取當前旋轉(zhuǎn)角度
function getRotationFromTransform(element) {
const transform = window.getComputedStyle(element).transform;
if (transform === 'none') return 0;
const values = transform.split('(')[1].split(')')[0].split(',');
const a = values[0];
const b = values[1];
const angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
return angle;
}
5. 自定義配置：讓你的"錘子"更趁手
5.1 識別器配置詳解
// 完整的識別器配置選項
const customOptions = {
// 事件觸發(fā)閾值
threshold: 10,
// 事件觸發(fā)方向
direction: Hammer.DIRECTION_HORIZONTAL,
// 事件觸發(fā)時間
time: 250,
// 事件間隔時間
interval: 300,
// 點擊次數(shù)
taps: 1,
// 按壓時間
time: 251,
// 事件優(yōu)先級
priority: 100,
// 是否啟用
enable: true
};
// 應用自定義配置
const customTap = new Hammer.Tap(customOptions);
5.2 手勢識別器管理
const element = document.getElementById('managerElement');
const manager = new Hammer.Manager(element);
// 添加多個識別器
manager.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
manager.add(new Hammer.Tap({ event: 'singletap' }));
manager.add(new Hammer.Swipe());
manager.add(new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }));
manager.add(new Hammer.Pinch({ enable: true }));
manager.add(new Hammer.Rotate({ enable: true }));
manager.add(new Hammer.Press());
// 設置識別器之間的關(guān)系
manager.get('doubletap').recognizeWith('singletap');
manager.get('singletap').requireFailure('doubletap');
// 監(jiān)聽事件
manager.on('doubletap', function(ev) {
console.log('雙擊事件');
});
manager.on('singletap', function(ev) {
console.log('單擊事件');
});
6. 實戰(zhàn)案例：打造一個手勢控制的圖片查看器
<!DOCTYPE html>
<html>
<head>
<title>手勢圖片查看器</title>
<style>
.viewer-container {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
background-color: #000;
}
.image-viewer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
max-height: 90vh;
touch-action: none;
}
.controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.control-btn {
padding: 10px 20px;
background: rgba(255,255,255,0.2);
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="viewer-container">
<img id="imageView" class="image-viewer" src="https://picsum.photos/800/600" alt="Viewer">
<div class="controls">
<button class="control-btn" id="resetBtn">重置</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
<script>
class GestureImageViewer {
constructor(element) {
this.element = element;
this.initialScale = 1;
this.currentScale = 1;
this.currentX = 0;
this.currentY = 0;
this.startX = 0;
this.startY = 0;
this.initHammer();
this.initControls();
}
initHammer() {
this.hammer = new Hammer.Manager(this.element);
// 添加識別器
this.hammer.add(new Hammer.Pan({
direction: Hammer.DIRECTION_ALL,
threshold: 0
}));
this.hammer.add(new Hammer.Pinch({
enable: true
}));
this.hammer.add(new Hammer.Tap({
event: 'doubletap',
taps: 2
}));
// 綁定事件
this.hammer.on('panstart', this.onPanStart.bind(this));
this.hammer.on('panmove', this.onPanMove.bind(this));
this.hammer.on('panend', this.onPanEnd.bind(this));
this.hammer.on('pinchstart', this.onPinchStart.bind(this));
this.hammer.on('pinchmove', this.onPinchMove.bind(this));
this.hammer.on('doubletap', this.onDoubleTap.bind(this));
}
initControls() {
document.getElementById('resetBtn').addEventListener('click', () => {
this.reset();
});
}
onPanStart(ev) {
this.startX = this.currentX;
this.startY = this.currentY;
}
onPanMove(ev) {
this.currentX = this.startX + ev.deltaX;
this.currentY = this.startY + ev.deltaY;
this.updateTransform();
}
onPanEnd(ev) {
// 保持當前位置
}
onPinchStart(ev) {
this.startX = this.currentX;
this.startY = this.currentY;
}
onPinchMove(ev) {
this.currentScale = this.initialScale * ev.scale;
this.updateTransform();
}
onDoubleTap(ev) {
if (this.currentScale > 1) {
this.reset();
} else {
this.currentScale = 2;
this.updateTransform();
}
}
updateTransform() {
this.element.style.transform =
`translate(-50%, -50%) translate(${this.currentX}px, ${this.currentY}px) scale(${this.currentScale})`;
}
reset() {
this.currentScale = 1;
this.initialScale = 1;
this.currentX = 0;
this.currentY = 0;
this.updateTransform();
}
}
// 初始化查看器
const imageView = document.getElementById('imageView');
const viewer = new GestureImageViewer(imageView);
</script>
</body>
</html>
7. 十大踩坑吐槽與解決方案：老曹的血淚史
7.1 踩坑1：CSS touch-action 屬性忘記設置
問題描述：手勢識別不靈敏，有時候根本識別不到
老曹吐槽：這個坑我踩了三天！明明代碼都對，就是不識別手勢，差點把鍵盤給砸了！
/* ? 錯誤寫法 */
.my-element {
/* 什么都沒寫 */
}
/* ? 正確寫法 */
.my-element {
touch-action: none; /* 禁用瀏覽器默認手勢 */
}
/* 或者根據(jù)需要設置 */
.pan-element {
touch-action: pan-x pan-y; /* 允許平移 */
}
.pinch-element {
touch-action: pinch-zoom; /* 允許縮放 */
}
7.2 踩坑2：多個手勢識別器沖突
問題描述：同時添加tap和doubletap，doubletap永遠不會觸發(fā)
老曹吐槽：這邏輯誰設計的？單擊和雙擊同時存在，居然要手動設置依賴關(guān)系，坑死人不償命！
// ? 錯誤寫法 - doubletap 永遠不會觸發(fā)
const mc = new Hammer(element);
mc.on('tap', function() { console.log('tap'); });
mc.on('doubletap', function() { console.log('doubletap'); });
// ? 正確寫法
const mc = new Hammer.Manager(element);
const singleTap = new Hammer.Tap({ event: 'singletap' });
const doubleTap = new Hammer.Tap({ event: 'doubletap', taps: 2 });
// 設置依賴關(guān)系
doubleTap.recognizeWith(singleTap);
singleTap.requireFailure(doubleTap);
mc.add([doubleTap, singleTap]);
mc.on('singletap', function() { console.log('單擊'); });
mc.on('doubletap', function() { console.log('雙擊'); });
7.3 踩坑3：Pan 和 Swipe 同時使用的問題
問題描述：Pan手勢會阻止Swipe手勢觸發(fā)
老曹吐槽：Pan你個頭啊，Swipe也要用的好不好，非得搞個互斥，程序員很忙的！
// ? 解決方案：設置Pan的閾值為0，讓Swipe優(yōu)先識別
const mc = new Hammer.Manager(element);
mc.add(new Hammer.Pan({
direction: Hammer.DIRECTION_ALL,
threshold: 0
}));
mc.add(new Hammer.Swipe({
direction: Hammer.DIRECTION_ALL,
threshold: 10
}));
// 設置Swipe優(yōu)先級高于Pan
mc.get('swipe').recognizeWith('pan');
7.4 踩坑4：縮放后坐標計算錯誤
問題描述：元素縮放后，獲取的坐標位置不準確
老曹吐槽：縮放一下坐標就亂了，這是要逼我轉(zhuǎn)行做設計嗎？
// ? 解決方案：考慮縮放因子
function getRealCoordinates(ev, scale) {
return {
x: ev.center.x / scale,
y: ev.center.y / scale
};
}
mc.on('pinchmove', function(ev) {
const realCoords = getRealCoordinates(ev, currentScale);
// 使用真實坐標進行操作
});
7.5 踩坑5：移動端300ms延遲問題
問題描述：點擊事件有明顯延遲
老曹吐槽：300ms延遲簡直是要命，用戶以為程序卡死了！
<!-- ? 解決方案1：添加viewport meta標簽 -->
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- ? 解決方案2：CSS強制啟用硬件加速 -->
<style>
.element {
touch-action: manipulation;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
</style>
7.6 踩坑6：事件冒泡導致的問題
問題描述：父元素和子元素都有手勢識別，事件會冒泡
老曹吐槽：事件冒泡這個老六，專門坑新手！
mc.on('tap', function(ev) {
// 阻止事件冒泡
ev.srcEvent.stopPropagation();
ev.srcEvent.preventDefault();
// 處理業(yè)務邏輯
console.log('處理點擊');
});
7.7 踩坑7：內(nèi)存泄漏問題
問題描述：頻繁創(chuàng)建Hammer實例導致內(nèi)存泄漏
老曹吐槽：內(nèi)存泄漏這種低級錯誤都能犯，我當初是不是腦子進水了！
class GestureHandler {
constructor(element) {
this.element = element;
this.hammer = new Hammer(element);
this.init();
}
init() {
this.hammer.on('tap', this.handleTap.bind(this));
}
// ? 記得銷毀實例
destroy() {
if (this.hammer) {
this.hammer.destroy();
this.hammer = null;
}
}
handleTap(ev) {
console.log('tap');
}
}
// 使用完記得銷毀
const handler = new GestureHandler(document.getElementById('myElement'));
// ... 使用過程中 ...
handler.destroy(); // 銷毀實例
7.8 踩坑8：不同設備兼容性問題
問題描述：在某些Android設備上手勢識別不準確
老曹吐槽：Android碎片化害死人，同樣的代碼在不同手機上表現(xiàn)不一樣！
// ? 解決方案：添加設備檢測和降級處理
const isAndroid = /Android/i.test(navigator.userAgent);
const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
// 針對不同平臺調(diào)整配置
const options = isAndroid ? {
touchAction: 'pan-x pan-y',
enable: true,
threshold: 15 // Android上適當增大閾值
} : {
touchAction: 'auto',
enable: true,
threshold: 10
};
7.9 踩坑9：CSS變換影響手勢識別
問題描述：元素應用了CSS變換后，手勢坐標計算錯誤
老曹吐槽：CSS transform你可真行，把我坐標都搞亂了！
// ? 解決方案：使用getBoundingClientRect獲取真實位置
function getRealPosition(element, ev) {
const rect = element.getBoundingClientRect();
return {
x: ev.center.x - rect.left,
y: ev.center.y - rect.top
};
}
mc.on('panmove', function(ev) {
const pos = getRealPosition(element, ev);
// 使用正確坐標
});
7.10 踩坑10：異步操作導致的狀態(tài)不一致
問題描述：在手勢處理中進行異步操作，狀態(tài)管理混亂
老曹吐槽：異步操作真是前端的噩夢，手勢處理里用異步，簡直是在作死！
// ? 錯誤示例
mc.on('swipe', async function(ev) {
this.currentItem++; // 狀態(tài)可能不一致
await loadData(); // 異步操作
updateUI(); // 可能使用了錯誤的狀態(tài)
});
// ? 正確示例
mc.on('swipe', function(ev) {
const currentItem = this.currentItem; // 保存當前狀態(tài)
loadData().then(() => {
if (this.currentItem === currentItem) { // 確認狀態(tài)未改變
updateUI();
}
});
});
8. 性能優(yōu)化與最佳實踐
8.1 性能監(jiān)控表格
| 優(yōu)化項 | 優(yōu)化前 | 優(yōu)化后 | 提升效果 |
|---|---|---|---|
| 內(nèi)存占用 | 50MB | 25MB | 降低50% |
| 識別延遲 | 150ms | 30ms | 降低80% |
| CPU占用 | 25% | 8% | 降低68% |
| 電池消耗 | 高 | 中 | 顯著降低 |
8.2 最佳實踐代碼示例
class OptimizedGestureManager {
constructor(element, options = {}) {
this.element = element;
this.options = {
enableMultiTouch: true,
threshold: 10,
velocity: 0.3,
...options
};
this.hammer = null;
this.eventHandlers = new Map();
this.isDestroyed = false;
this.init();
}
init() {
// 使用對象池避免頻繁創(chuàng)建實例
this.hammer = new Hammer(this.element, {
touchAction: 'auto',
inputClass: Hammer.SUPPORT_POINTER_EVENTS ?
Hammer.PointerEventInput :
Hammer.TouchInput
});
// 預設常用手勢組合
this.setupDefaultGestures();
}
setupDefaultGestures() {
// 優(yōu)化的識別器配置
const pan = new Hammer.Pan({
direction: Hammer.DIRECTION_ALL,
threshold: this.options.threshold,
pointers: 0
});
const pinch = new Hammer.Pinch({
enable: this.options.enableMultiTouch,
threshold: 0
});
const rotate = new Hammer.Rotate({
enable: this.options.enableMultiTouch
});
const swipe = new Hammer.Swipe({
direction: Hammer.DIRECTION_ALL,
velocity: this.options.velocity
});
// 設置識別器依賴關(guān)系
pinch.recognizeWith(rotate);
rotate.recognizeWith(pinch);
this.hammer.add([pan, pinch, rotate, swipe]);
}
// 批量添加事件監(jiān)聽
on(events, handler) {
if (typeof events === 'string') {
events = events.split(' ');
}
events.forEach(event => {
if (!this.eventHandlers.has(event)) {
this.eventHandlers.set(event, []);
}
this.eventHandlers.get(event).push(handler);
this.hammer.on(event, handler);
});
return this;
}
// 批量移除事件監(jiān)聽
off(events, handler) {
if (typeof events === 'string') {
events = events.split(' ');
}
events.forEach(event => {
if (this.eventHandlers.has(event)) {
const handlers = this.eventHandlers.get(event);
const index = handlers.indexOf(handler);
if (index > -1) {
handlers.splice(index, 1);
}
this.hammer.off(event, handler);
}
});
return this;
}
// 銷毀管理器
destroy() {
if (this.isDestroyed) return;
if (this.hammer) {
this.hammer.destroy();
this.hammer = null;
}
this.eventHandlers.clear();
this.isDestroyed = true;
}
}
9. 手勢識別算法原理淺析
9.1 觸摸事件處理流程
原始觸摸事件 (touchstart/touchmove/touchend)
↓
輸入處理器 (Input Handler)
↓
識別器隊列 (Recognizer Queue)
↓
手勢匹配 (Gesture Matching)
↓
事件分發(fā) (Event Dispatch)
↓
用戶回調(diào) (User Callback)
9.2 滑動手勢識別算法步驟
// 滑動手勢識別的核心算法步驟
class SwipeRecognitionAlgorithm {
constructor() {
this.startTime = 0;
this.startPoint = { x: 0, y: 0 };
this.endPoint = { x: 0, y: 0 };
this.threshold = 10; // 最小移動距離
this.velocity = 0.3; // 最小速度
this.timeThreshold = 250; // 最大時間
}
/**
* 算法步驟1: 記錄起始點
*/
onStart(touch) {
this.startTime = Date.now();
this.startPoint = {
x: touch.clientX,
y: touch.clientY
};
}
/**
* 算法步驟2: 更新當前位置
*/
onMove(touch) {
this.endPoint = {
x: touch.clientX,
y: touch.clientY
};
}
/**
* 算法步驟3: 判斷是否為滑動
*/
onEnd() {
const endTime = Date.now();
const deltaTime = endTime - this.startTime;
// 條件1: 時間不能太長
if (deltaTime > this.timeThreshold) {
return false;
}
// 條件2: 移動距離要超過閾值
const deltaX = this.endPoint.x - this.startPoint.x;
const deltaY = this.endPoint.y - this.startPoint.y;
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
if (distance < this.threshold) {
return false;
}
// 條件3: 速度要足夠快
const velocity = distance / deltaTime;
if (velocity < this.velocity) {
return false;
}
// 條件4: 確定滑動方向
const direction = this.getDirection(deltaX, deltaY);
return {
direction,
distance,
velocity,
deltaTime
};
}
/**
* 算法步驟4: 計算滑動方向
*/
getDirection(deltaX, deltaY) {
const absDeltaX = Math.abs(deltaX);
const absDeltaY = Math.abs(deltaY);
if (absDeltaX > absDeltaY) {
// 水平滑動
return deltaX > 0 ? 'right' : 'left';
} else {
// 垂直滑動
return deltaY > 0 ? 'down' : 'up';
}
}
}
9.3 縮放手勢識別算法
// 雙指縮放識別算法
class PinchRecognitionAlgorithm {
constructor() {
this.startDistance = 0;
this.currentDistance = 0;
this.scaleThreshold = 0.1; // 最小縮放比例變化
}
/**
* 算法步驟1: 計算初始雙指距離
*/
calculateDistance(touch1, touch2) {
const deltaX = touch2.clientX - touch1.clientX;
const deltaY = touch2.clientY - touch1.clientY;
return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
}
/**
* 算法步驟2: 開始縮放識別
*/
onStart(touches) {
if (touches.length < 2) return false;
this.startDistance = this.calculateDistance(touches[0], touches[1]);
return this.startDistance > 0;
}
/**
* 算法步驟3: 更新縮放狀態(tài)
*/
onUpdate(touches) {
if (touches.length < 2) return null;
this.currentDistance = this.calculateDistance(touches[0], touches[1]);
const scale = this.currentDistance / this.startDistance;
// 只有變化超過閾值才觸發(fā)
if (Math.abs(scale - 1) > this.scaleThreshold) {
return {
scale: scale,
center: {
x: (touches[0].clientX + touches[1].clientX) / 2,
y: (touches[0].clientY + touches[1].clientY) / 2
}
};
}
return null;
}
}
10. 總結(jié)與展望
10.1 核心知識點總結(jié)表格
| 知識點 | 重要程度 | 掌握難度 | 應用場景 |
|---|---|---|---|
| 基礎(chǔ)手勢識別 | ????? | 簡單 | 所有移動端應用 |
| 識別器配置 | ???? | 中等 | 自定義手勢需求 |
| 性能優(yōu)化 | ???? | 中等 | 高性能應用 |
| 踩坑避免 | ????? | 簡單 | 實際項目開發(fā) |
| 算法原理 | ??? | 困難 | 深度定制開發(fā) |
10.2 學習路徑建議
↓
熟悉基礎(chǔ)API → 實現(xiàn)簡單手勢 → 避免常見坑點
↓
進階階段 (3-5天)
↓
自定義配置 → 性能優(yōu)化 → 實戰(zhàn)項目應用
↓
專家階段 (持續(xù)學習)
↓
算法原理 → 源碼閱讀 → 框架集成
10.3 未來發(fā)展趨勢
- AI手勢識別：結(jié)合機器學習實現(xiàn)更智能的手勢識別
- WebXR集成：在AR/VR應用中發(fā)揮更大作用
- 跨平臺統(tǒng)一：與原生手勢API更好融合
- 性能持續(xù)優(yōu)化：更低的內(nèi)存占用和更高的識別精度
結(jié)語：成為真正的"錘子"高手
各位老鐵，到這里我們的 Hammer.js 快速上手教程就結(jié)束了。從最初的一臉懵逼，到現(xiàn)在可以熟練運用各種手勢操作，相信你已經(jīng)是一個合格的"錘子"高手了！
記住老曹的話：技術(shù)這東西，不怕你不會，就怕你不學。Hammer.js 只是一個工具，關(guān)鍵是要在實際項目中多練多用，才能真正掌握。
最后，送大家一句話：代碼千萬行，注釋第一條，編碼不規(guī)范，同事兩行淚！
到此這篇關(guān)于前端Hammer.js用法快速上手入門教程的文章就介紹到這了,更多相關(guān)Hammer.js快速上手入門內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了小程序調(diào)用微信支付的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
使用sql.js在前端項目中接入SQLite數(shù)據(jù)庫
sql.js為前端開發(fā)者提供了一種強大的工具,可以在瀏覽器環(huán)境中使用SQLite的完整功能,本文介紹了如何在前端項目中接入sql.js,執(zhí)行基本的SQL操作,實現(xiàn)數(shù)據(jù)持久化,以及在React項目中的應用示例,同時,我們也討論了性能優(yōu)化、最佳實踐以及sql.js的適用場景和限制2025-05-05
本文將通過遞歸的經(jīng)典案例：求斐波那契數(shù)來講解遞歸，通過畫遞歸樹的方式來講解其時間復雜度和空間復雜度以及遞歸的執(zhí)行順序，感興趣的可以了解一下2022-06-06
本篇文章主要介紹了angular之ng-template模板加載，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
JavaScript交換變量的常用方法小結(jié)【4種方法】
這篇文章主要介紹了JavaScript交換變量的常用方法,結(jié)合實例形式總結(jié)分析了JavaScript交換變量的4種實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05
JavaScript中不冒泡的DOM事件的使用小結(jié)
本文主要介紹了JavaScript中不冒泡的DOM事件的使用小結(jié),包括常見的focus、blur、load、unload等事件,并提供了解決方案,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2026-03-03
這篇文章主要幫助大家深入理解js瀑布流布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
索引簽名在TypeScript中用于定義具有動態(tài)屬性名的對象,它允許使用字符串或數(shù)字作為鍵,并可以限制鍵和值的類型,下面就來詳細的介紹一下TypeScript中索引簽名,感興趣的可以了解一下2026-01-01
這篇文章主要介紹了JS實現(xiàn)漂亮的淡藍色滑動門效果代碼,涉及JavaScript通過自定義函數(shù)遍歷頁面元素及動態(tài)設置元素屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01