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

hammer.js简单案例

“`html，，，， ，，， ， ， var el = document.getElementById(‘test’);， var hammer = new Hammer(el);， hammer.on(‘tap’, function() {， alert(‘Element tapped!’);， });， ，

Hammer.js基础概念与核心功能

1 什么是Hammer.js？

Hammer.js 是一个轻量级的 JavaScript 库，专门用于处理移动设备上的触摸手势（如点击、滑动、缩放、旋转等），它抽象了不同设备之间的触摸事件差异，提供统一的 API，帮助开发者快速实现复杂的手势交互,其核心优势在于：

  • 跨平台兼容：支持桌面浏览器（鼠标事件模拟）和移动设备。
  • 手势识别：支持 tap、pan、pinch、rotate、press 等多种手势。
  • 链式调用：通过 Hammer 实例绑定事件,代码简洁易读。

2 核心手势类型与触发条件

手势类型 触发条件 典型应用场景
tap 快速点击屏幕后立即抬起 替代原生点击事件
pan 单指触摸后滑动 页面滚动、元素拖拽
pinch 双指收缩/扩张 图片缩放、地图缩放
rotate 双指旋转 图片旋转、游戏控制
press 长按屏幕 显示上下文菜单

实战案例：实现移动端可缩放的图片视图

1 功能需求

  • 用户可通过单指拖动图片（pan 手势）。
  • 双指捏合缩放图片（pinch 手势）。
  • 双击图片复位至原始大小（doubletap 手势）。

2 实现步骤

2.1 HTML结构

<div id="image-container">
  <img id="target-image" src="example.jpg" alt="示例图片">
</div>

2.2 CSS样式

#image-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  touch-action: none; / 禁用默认触摸行为 /
}
#target-image {
  max-width: 100%;
  max-height: 100%;
  transform-origin: top left; / 缩放基准点 /
}

2.3 JavaScript代码

// 引入Hammer.js库
const hammer = new Hammer(document.getElementById('target-image'));
// 初始化缩放比例和位移变量
let scale = 1;
let lastScale = 1;
let panX = 0;
let panY = 0;
// 绑定手势事件
hammer.on('pan', (e) => {
  // 计算拖拽位移（考虑缩放后的位移偏移）
  panX += e.deltaX / scale;
  panY += e.deltaY / scale;
  updateImageTransform();
});
hammer.on('pinch', (e) => {
  // 计算缩放比例（限制最小缩放值）
  scale = Math.max(0.5, Math.min(lastScale  e.scale, 3));
  lastScale = scale;
  updateImageTransform();
});
hammer.on('doubletap', (e) => {
  // 双击复位
  scale = 1;
  panX = 0;
  panY = 0;
  updateImageTransform();
});
// 更新图片变换样式
function updateImageTransform() {
  const img = document.getElementById('target-image');
  img.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
}

代码解析与关键点说明

关键代码片段 作用说明 注意事项
touch-action: none 禁用浏览器默认的触摸行为（如滚动） 避免与自定义手势冲突
transform-origin: top left 设置缩放基准点为图片左上角 确保缩放时位置准确
Math.max(0.5, Math.min(...)) 限制缩放比例范围（0.5~3倍） 防止过度缩放导致布局异常
e.deltaX / scale 根据当前缩放比例调整拖拽位移 保证缩放后拖拽灵敏度一致

常见问题与优化建议

1 性能优化

  • 事件节流：对高频触发的 pan 事件使用节流函数（如 lodash.throttle）。
  • 惰性更新：仅在手势结束后统一更新样式,减少重绘次数。

2 兼容性处理

  • 旧版iOS设备：部分设备需手动开启 passive: false 以阻止默认滚动行为。
  • 桌面浏览器：通过 hasPointerEvent 检测是否支持鼠标事件模拟。

FAQs（常见问题解答）

Q1：如何支持更多手势（如长按、旋转）？

A：通过 Hammer 实例的 get 方法获取对应手势对象并绑定事件。

// 长按事件
const press = hammer.get('press');
press.require({ type: 'press', time: 1000 }); // 触发条件：长按1秒
press.on('press', () => {
  console.log('长按触发');
});
// 旋转事件
const rotate = hammer.get('rotate');
rotate.on('rotate', (e) => {
  console.log(`旋转角度：${e.rotation}`);
});

Q2：如何处理多指操作中的主次手指？

A：通过 event.pointers 属性区分不同手指。

hammer.on('pinch', (e) => {
  const [finger1, finger2] = e.pointers;
  console.log(`手指1位置：(${finger1.clientX}, ${finger1.clientY})`);
  console.log(`手指2位置：(${finger2.clientX}, ${finger2.clientY})`);
});
Hammer.js简单案例
0

相关文章