当前位置：首页 > 行业动态 > 正文

hammer.js使用教程

Hammer.js使用需先引入库文件，通过 new Hammer()实例化对象，绑定 tap、 pan等事件

Hammer.js使用教程详解

Hammer.js 简介

Hammer.js 是一个轻量级的 JavaScript 库，专为处理移动设备（手机、平板）上的触摸手势而设计，它支持多种手势识别，如点击（Tap）、滑动（Pan/Swipe）、缩放（Pinch）、旋转（Rotate）等，并兼容桌面浏览器的鼠标事件,其核心优势在于：

  • 跨平台：支持 iOS、Android、Windows 等主流移动设备。
  • 高性能：通过优化算法实现低延迟手势识别。
  • 可扩展性：支持自定义手势和复杂交互逻辑。
  • 轻量级：压缩后仅约 5KB,适合移动端使用。

快速上手

安装方式

方式 命令/步骤 适用场景
npm 安装 npm install hammerjs 现代前端项目（Webpack/Rollup）
CDN 引入 “`html


“` | 快速测试或无构建工具的项目 |
| 手动下载 | 从官网下载 `hammer.js` 文件 | 离线开发环境 |

基础代码示例

// 获取目标元素（如一个 div）
const element = document.getElementById('touch-area');
// 创建 Hammer 实例
const hammer = new Hammer(element);
// 监听 Tap 事件
hammer.on('tap', function(e) {
    console.log('Tap detected!', e);
});

核心手势详解

Tap（点击）

  • 触发条件：快速点击屏幕后立即抬起。
  • 事件对象属性：
    • e.pointerType：触摸类型（'touch' 或 'mouse'）。
    • e.center：点击坐标（相对于元素）。
  • 应用场景：替代传统点击事件,兼容触控设备。

Pan（平移）

  • 触发条件：单指在屏幕上滑动。
  • 关键属性：
    • e.deltaX / e.deltaY：滑动距离（单位：px）。
    • e.velocityX / e.velocityY：滑动速度（单位：px/s）。
  • 代码示例： 
    hammer.on('pan', function(e) {
  // 实现元素拖动
  element.style.transform = `translate(${e.deltaX}px, ${e.deltaY}px)`;
});

Pinch（缩放）

  • 触发条件：双指同时扩张或收缩。
  • 关键属性：
    • e.scale：当前缩放比例（初始为 1）。
    • e.velocity：缩放速度。
  • 应用场景：图片/地图缩放。

Rotate（旋转）

  • 触发条件：双指旋转。
  • 关键属性：
    • e.rotation：旋转角度（单位：度）。
    • e.velocity：旋转速度。
  • 代码示例： 
    hammer.on('rotate', function(e) {
  // 实现元素旋转
  element.style.transform += `rotate(${e.rotation}deg)`;
});

Press（长按）

  • 触发条件：持续按压超过阈值时间。
  • 配置参数：
    • threshold：触发长按的时间（默认 500ms）。
  • 代码示例： 
    hammer.get('press').requireFailure(['tap']); // 避免与点击冲突
hammer.on('press', function(e) {
  console.log('Long press detected!');
});

Hold（持续按压）

  • 触发条件：持续按压并触发周期性事件。
  • 关键属性：
    • e.duration：已按压时间。
  • 应用场景：游戏按键、菜单长按触发。

高级功能

自定义手势

Hammer.js 允许通过 Hammer.Pan、Hammer.Pinch 等类自定义手势规则，限制 Pan 仅水平滑动：

const pan = new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL });
hammer.add(pan);
hammer.on('pan', function(e) {
    // 仅处理水平滑动
    console.log(e.deltaX);
});

多指针处理

  • 问题：如何处理双指缩放时的其他手指操作？
  • 解决方案：通过 e.pointers 获取所有触点信息，结合 e.preventDefault() 阻止默认行为。

性能优化

  • 节流（Throttle）：限制事件触发频率。
  • 防抖（Debounce）：合并高频触发事件。
  • 示例： 
    let isThrottled = false;
hammer.on('pan', function(e) {
  if (!isThrottled) {
      console.log('Pan event:', e.deltaX);
      isThrottled = true;
      setTimeout(() => isThrottled = false, 100); // 100ms 节流
  }
});

实际应用案例

实现图片轮播（Carousel）

  • 需求：左右滑动切换图片,支持边缘反弹。
  • 关键逻辑：
    • 监听 pan 事件,计算当前索引。
    • 根据 e.deltaX 判断方向,触发图片切换。
  • 代码片段： 
    let currentIndex = 0;
hammer.on('panend', function(e) {
  if (e.deltaX > 50) {
      currentIndex--; // 左滑显示上一张
  } else if (e.deltaX < -50) {
      currentIndex++; // 右滑显示下一张
  }
  updateCarousel(currentIndex);
});

地图缩放与拖动

  • 需求：双指缩放地图,单指拖动视角。
  • 实现步骤：
    1. 绑定 pinch 和 pan 事件。
    2. 根据 e.scale 调整地图缩放级别。
    3. 根据 e.deltaX/e.deltaY 移动地图位置。

游戏控制（如角色移动）

  • 需求：单指拖动控制角色移动,长按加速。
  • 实现逻辑：
    • pan 事件更新角色坐标。
    • press 事件触发加速状态。

常见问题与解决方案（FAQs）

问题 1：如何在桌面浏览器上模拟触摸事件？

解答：
Hammer.js 支持鼠标事件模拟触摸操作。

  • 单击：鼠标左键点击触发 tap。
  • 右键点击：触发 tap（pointerType 为 'mouse'）。
  • 鼠标拖动：触发 pan 事件。
    注意：需调用 e.preventDefault() 避免鼠标事件与触摸事件的冲突。

问题 2：手势识别冲突如何处理？

解答：
当多个手势可能同时触发时（如 tap 和 pan）,可通过以下方法解决：

  1. 设置优先级：使用 requireFailure 方法排除高优先级手势。 
    hammer.get('pan').requireFailure('tap'); // 先判断是否为 Tap，失败后再触发 Pan
  2. 停止事件检测：在回调中调用 e.stopDetection()，阻止后续手势识别。 
    hammer.on('tap', function(e) {
    e.stopDetection(); // 仅处理 Tap，不继续检测 Pinch/Rotate 等
});
  3. 调整识别阈值：通过配置选项（如 threshold、velocity）优化手势灵敏度。

归纳与资源推荐

  • 官方文档：Hammer.js 官网
  • GitHub 仓库：源码与示例
  • 学习建议：从基础手势（Tap/Pan）入手，逐步尝试缩放、旋转等复杂交互，结合实际案例（如轮播图、地图）加深
Hammer.js使用教程手势
0

相关文章