APP开发_Hammer.js 触摸事件处理库教程

1 Hammer.js 概述

Hammer.js 是一个开源的、轻量级的触屏设备 JavaScript 手势库。它可以在不需要依赖其他工具或库的情况下识别触摸和鼠标事件，允许同时监听多个手势，甚至自定义识别器，并识别滑动方向。

Hammer.js 的主要特点包括：

轻量级：Hammer.js 的大小只有几 KB，非常适合用于移动端应用，不会对应用造成过大的负担。
跨平台兼容：它支持各种主流浏览器和移动设备，包括 iOS、Android、Windows Phone 等，无需担心兼容问题。
简单易用：Hammer.js 提供了简洁的 API 接口，开发者只需要几行代码就可以实现复杂的手势交互。
可扩展性强：通过插件系统，开发者可以添加自定义手势或扩展现有手势的功能。

在实际应用中，Hammer.js 能够帮助开发者轻松地将触摸交互融入网页和应用程序中，实现更加直观、丰富的用户体验。无论是响应式设计、富媒体应用、游戏开发还是增强现实(AR)应用，Hammer.js 都能提供强大的手势识别功能，让用户更自然地与界面进行交互。

2 Hammer.js 的基本使用

2.1 引入 Hammer

（1）通过 npm 初始化项目

进入到指定的开发目录下，初始化 npm 项目（如果你的目录还不是一个 npm 项目，你需要初始化它。这将会创建一个 package.json 文件，其中包含你的项目依赖和其他元数据）。

npm init -y

（2）安装 Hammer

使用 npm 安装 Hammer 包。

npm install hammerjs

（3）在项目中引入 Hammer

可以使用 require 或 import 语句来引入 svg-pan-zoom。

// 使用 CommonJS 语法（Node.js）  
const Hammer = require('hammerjs');// 或者使用 ES6 语法（例如，在模块化的前端项目中）  
import Hammer from 'hammerjs';

也可以通过 <script> 标签直接引入：

<script src="node_modules/hammerjs/hammer.min.js"></script>

2.2 初始化 Hammer Manager

// 创建一个Hammer Manager实例  
const manager = new Hammer(document.getElementById('your-element-id'));

2.3 绑定基础触摸事件（如tap、swipe等）

（1）轻击（Tap）

当用户轻击元素时触发：

manager.on('tap', (ev) => {  console.log('Tap event', ev);  
});

（2）双击（Doubletap）

当用户连续轻击元素两次时触发：

manager.on('doubletap', (ev) => {  console.log('Doubletap event', ev);  
});

（3）滑动（Swipe）

当用户在元素上滑动手指时触发。你可以通过 direction 属性来判断滑动的方向（例如：LEFT、RIGHT、UP、DOWN）：

manager.on('swipe', (ev) => {  console.log('Swipe event', ev);  switch (ev.direction) {  case Hammer.DIRECTION_LEFT:  console.log('Swiped left');  break;  case Hammer.DIRECTION_RIGHT:  console.log('Swiped right');  break;  // 可以添加其他方向的处理...  }  
});

（4）按压（Press）

当用户按住元素一段时间（默认超过 500 毫秒）后触发：

manager.on('press', (ev) => {  console.log('Press event', ev);  
});

（5）自定义手势配置

Hammer.js 允许你通过配置对象来自定义手势识别器的行为。例如，你可以改变滑动事件触发的阈值：

const manager = new Hammer(myElement, {  swipe_velocity: 0.4, // 设置滑动速度阈值  swipe_max_touches: 1, // 设置同时触摸的最大数量  // 可以添加其他配置...  
});

（6）移除事件监听器

如果你需要在某个时刻移除事件监听器，你可以使用 off 方法：

manager.off('tap'); // 移除 tap 事件的监听器

2.4 监听多个事件类型

在 Hammer.js 中，可以使用 on 方法来监听多个事件类型。这允许用户一次性绑定多个事件的回调函数，从而简化代码并提高效率。以下是如何使用 Hammer.js 监听多个事件类型的示例：

首先，确保已经初始化了 Hammer Manager 并绑定到了一个 DOM 元素：

const myElement = document.getElementById('my-element');  
const mc = new Hammer(myElement);

然后，使用空格分隔的方式来监听多个事件类型。在回调函数中，通过 event.type 属性来确定触发的是哪个事件：

const myElement = document.getElementById('my-element');  
const mc = new Hammer(myElement);mc.on('tap doubletap swipe press', (event) => {  switch (event.type) {  case 'tap':  console.log('Tap event triggered');  break;  case 'doubletap':  console.log('Double tap event triggered');  break;  case 'swipe':  console.log('Swipe event triggered');  // 你可以根据swipe的方向做进一步处理  switch (event.direction) {  case Hammer.DIRECTION_LEFT:  console.log('Swiped left');  break;  case Hammer.DIRECTION_RIGHT:  console.log('Swiped right');  break;  // 其他方向...  }  break;  case 'press':  console.log('Press event triggered');  break;  // 其他事件类型...  }  
});

在上面的代码中，我们为 tap、doubletap、swipe 和 press 事件都绑定了同一个回调函数。在回调函数中，我们使用 switch 语句根据 event.type 来确定具体是哪个事件被触发了，并执行相应的逻辑。

3 高级手势识别与处理

3.1 识别双指缩放（pinch）

pinch 事件会在用户用两个手指在元素上执行缩放动作时触发。以下是如何使用 Hammer.js 来监听和处理双指缩放事件的示例：

const myElement = document.getElementById('my-element');  
const mc = new Hammer(myElement);mc.on('pinch', (event) => {  const scale = event.scale; // 缩放的比例，初始值为1，放大时大于1，缩小时小于1  const isPinchingIn = scale < 1; // 判断是向内缩放还是向外缩放  console.log('Pinch event triggered');  console.log('Scale:', scale);  console.log('Pinching in:', isPinchingIn);  // 根据缩放比例执行相应的逻辑，比如调整元素的大小或位置  if (isPinchingIn) {  // 处理向内缩放的逻辑  } else {  // 处理向外缩放的逻辑  }  
});

注意：Hammer.js 的早期版本不包含 pinch 识别器，在不能升级版本的情况下，可以使用 rotate 和 scale 事件组合来实现类似的功能。rotate事件用于处理旋转，而scale事件用于处理缩放。通过监听这两个事件，可以检测和处理双指操作时的旋转和缩放动作。

3.2 识别旋转（rotate）

用户用两个或多个手指在元素上执行旋转动作时，旋转（rotate）事件会被触发。以下是如何使用 Hammer.js 来监听和处理旋转事件的示例：

const myElement = document.getElementById('my-element');  
const mc = new Hammer(myElement);mc.on('rotate', (event) => {  const angle = event.angle; // 旋转的角度（以度为单位）  const isClockwise = angle > 0; // 判断是顺时针旋转还是逆时针旋转  console.log('Rotate event triggered');  console.log('Angle:', angle);  console.log('Clockwise:', isClockwise);  // 根据旋转角度执行相应的逻辑，比如调整元素的旋转状态  // 例如，如果你使用的是CSS transforms，你可以这样更新元素的旋转：  myElement.style.transform = `rotate(${angle}deg)`;  
});

注意，angle 属性表示的是相对于上一次旋转事件的累积角度变化。如果想要获取绝对的旋转角度，则需要在代码中维护一个状态变量来跟踪总的旋转角度。

此外，Hammer.js 还提供了 rotatestart、rotatemove 和 rotateend 事件，分别对应旋转开始、旋转过程中和旋转结束的时刻。这些事件对于实现更复杂的旋转逻辑（比如动画效果或逐步更新UI）非常有用。

mc.on('rotatestart', (event) => {  // 处理旋转开始的逻辑  
});  mc.on('rotatemove', (event) => {  // 在旋转过程中实时处理逻辑  
});  mc.on('rotateend', (event) => {  // 处理旋转结束的逻辑  
});

4 使用防抖（debounce）与节流（throttle）

4.1 防抖（Debounce）

防抖技术用于确保一个函数在一定时间内只执行一次，即使这个函数被连续触发多次。它特别适用于那些需要等待一段时间后再执行的操作，比如用户停止输入后再进行搜索或验证。

如下是使用 lodash 库的_.debounce 函数来创建一个防抖后的处理函数：

import _ from 'lodash';  const myElement = document.getElementById('my-element');  
const mc = new Hammer(myElement);  const debouncedHandler = _.debounce((event) => {  // 执行你的事件处理逻辑  console.log('Debounced event triggered:', event.type);  
}, 250); // 设置防抖时间为250毫秒  mc.on('tap', debouncedHandler);

在这个例子中，即使 tap 事件被连续触发多次，debouncedHandler 函数也只会在最后一次触发后的 250 毫秒内执行一次。

4.2 节流（Throttle）

节流技术用于确保一个函数在一段时间内只执行一定次数，即使这个函数被连续触发多次。它特别适用于那些需要定期执行的操作，比如定期更新 UI 或发送请求。

如下是使用 lodash 库的_.throttle 函数来创建一个节流后的处理函数：

import _ from 'lodash';  const myElement = document.getElementById('my-element');  
const mc = new Hammer(myElement);  const throttledHandler = _.throttle((event) => {  // 执行你的事件处理逻辑  console.log('Throttled event triggered:', event.type);  
}, 100); // 设置节流时间为100毫秒  mc.on('swipe', throttledHandler);