hammer.js

Hammer.js 简介

Hammer.js 是一个轻量级的 JavaScript 库，专为处理移动设备上的触摸手势而设计，它支持多种常见的手势操作（如点击、滑动、缩放、旋转等），并能兼容不同设备和浏览器，其核心目标是简化开发者在 Web 应用中实现复杂手势交互的过程，同时提供高度可定制的配置选项。

Hammer.js 的核心功能

关键特性：

1. 多手势识别：支持同时监听多种手势，并区分主次优先级。
2. 惯性与动量：可模拟物理效果（如快速滑动后的惯性滚动）。
3. 自定义手势：允许开发者定义复杂手势（如三指滑动+旋转）。
4. 事件防抖：避免手势冲突（pan 和 swipe 同时触发）。
5. 压力敏感支持：兼容 Pencil 或压感笔设备（如 iPad）。

快速上手指南

安装方式

• 直接引入脚本：

  <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>

• 通过 npm 安装：

  npm install hammerjs

• 模块化导入：

  import Hammer from 'hammerjs';

基础用法示例

<div id="target" style="width: 200px; height: 200px; background: #ccc;">
  触摸区域
</div>
<script>
  const target = document.getElementById('target');
  const hammer = new Hammer(target);
  // 监听 tap 事件
  hammer.on('tap', function(e) {
    alert('Tapped!');
  });
  // 监听 swipe 事件
  hammer.on('swipe', function(e) {
    console.log('Swiped! Direction: ' + e.direction);
  });
</script>

配置选项

高级特性与场景

自定义手势识别器

const customRecognizer = new Hammer.Recognizer({
  eventType: Hammer.EVENT_TYPE_TOUCH,
  requireFailure: [new Hammer.Pan()], // 确保 pan 手势未触发时才匹配
  recognizeWith: function(otherRecognizer) {
    // 自定义逻辑判断是否与其他手势冲突
    return !(otherRecognizer instanceof Hammer.Pan);
  }
});
customRecognizer.callback = function(event) {
  console.log('Custom Gesture Detected!');
};
hammer.add(customRecognizer);

惯性与动量模拟

hammer.on('panend', function(e) {
  const velocity = e.velocityX > 0.5 || e.velocityY > 0.5; // 判断是否有惯性
  if (velocity) {
    console.log('惯性滑动触发！');
    // 根据速度计算动画效果
  }
});

压力敏感支持（需设备支持）

hammer.on('press', function(e) {
  const pressure = e.pointerEvent.pressure; // 压力值（0~1）
  if (pressure > 0.8) {
    console.log('高压检测！');
  }
});

兼容性与性能优化

浏览器支持

性能优化建议

• 按需加载手势：禁用不必要的手势以减少计算开销。
• 事件节流：对高频触发的事件（如 pan）使用节流函数。
• DOM 优化：将手势绑定到父容器而非深层子元素。
• 防抖处理：避免手势冲突导致的重复触发。

Hammer.js 的优缺点分析

实际应用场景

1. 图片编辑器：通过 pinch 缩放、rotate 旋转调整图片。
2. 地图交互：pan 平移地图，doubletap 重置缩放。
3. 游戏控制：swipe 滑动攻击，press 蓄力技能。
4. 电商应用：pan 横向滑动查看商品详情，tap 加入购物车。
5. 在线教育：press 启动白板绘图，rotate 调整画布方向。

实际案例：电商商品预览交互

<div id="product-view" style="width: 300px; height: 400px;">
  <img src="product.jpg" alt="Product" />
</div>
<script>
  const productView = document.getElementById('product-view');
  const hammer = new Hammer(productView);
  // 双指缩放图片
  hammer.get('pinch').set({ enable: true });
  hammer.on('pinchmove', function(e) {
    productView.style.transform = `scale(${e.scale})`;
  });
  // 双击重置缩放
  hammer.on('doubletap', function(e) {
    productView.style.transform = 'scale(1)';
  });
</script>

相关问答FAQs

Q1：Hammer.js 与原生 touch 事件有什么区别？

A1：原生 touch 事件需手动计算坐标、速度和手势状态，而 Hammer.js 提供了标准化的手势识别和回调机制，支持多手势组合与冲突处理，大幅降低开发复杂度，原生实现 swipe 需判断触摸起点、终点和速度，而 Hammer.js 可直接通过 swipe 事件获取方向和距离。

Q2：如何处理 Hammer.js 的性能瓶颈？

A2：可通过以下方式优化：

1. 按需启用手势：仅开启业务需要的手势（如禁用 rotate）。
2. 事件节流：对高频事件（如 pan）使用 throttle。
3. 减少DOM层级：将手势绑定到顶层容器而非深层元素。
4. 关闭被动监听器：在移动端设置 { passive: true } 避免