在移动端开发中，由于需要支持手势操作，常常会用到一些手势识别库。其中，Hammer.js 是一个轻量级的 JavaScript 插件，可以通过监听触摸、鼠标和指针事件来实现多种手势操作，并且不依赖其他任何库。
本文将对 Hammer.js 进行详细介绍和使用指导，并提供示例代码供读者参考。
安装和配置
首先，在 HTML 文档中引入 jQuery 和 Hammer.js 的 JavaScript 文件：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
然后，在需要使用 Hammer.js 的页面中，初始化 Hammer.js 并绑定手势事件，例如：
$(function() {
var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);
mc.on("panleft panright tap press", function(ev) {
// 处理手势事件
});
});上面的代码中，myElement 是需要处理手势事件的元素，mc 是 Hammer.js 的实例对象。panleft、panright、tap、press 等是 Hammer.js 支持的手势事件。
手势事件
tap
单击事件，当手指轻触元素并迅速离开时触发，类似于鼠标的点击事件。
mc.on("tap", function(ev) {
console.log("You tapped me!");
});doubletap
双击事件，当手指在短时间内两次轻触元素时触发。
mc.on("doubletap", function(ev) {
console.log("You doubletapped me!");
});press
长按事件，当手指按住元素一段时间后触发。
mc.on("press", function(ev) {
console.log("You pressed me!");
});pan
拖动事件，当手指在屏幕上移动时触发，包含以下属性：
- deltaX：水平方向移动距离
- deltaY：垂直方向移动距离
- direction：移动方向，可取值为
DIRECTION_UP、DIRECTION_DOWN、DIRECTION_LEFT、DIRECTION_RIGHT - angle：与 x 轴的夹角
- distance：移动的距离
- velocityX：水平方向的速度
- velocityY：垂直方向的速度
mc.on("pan", function(ev) {
console.log("You panned me!");
// 输出移动距离和方向
console.log(ev.deltaX, ev.deltaY, ev.direction);
});swipe
快速滑动事件，当手指在屏幕上快速滑动时触发，包含以下属性：
- deltaX：水平方向滑动距离
- deltaY：垂直方向滑动距离
- direction：滑动方向，可取值为
DIRECTION_UP、DIRECTION_DOWN、DIRECTION_LEFT、DIRECTION_RIGHT - angle：与 x 轴的夹角
- distance：滑动的距离
- velocityX：水平方向的速度
- velocityY：垂直方向的速度
mc.on("swipe", function(ev) {
console.log("You swiped me!");
// 输出滑动方向和距离
console.log(ev.direction, ev.distance);
});pinch
双指缩放事件，当两个手指在屏幕上缩放时触发，包含以下属性：
- scale：缩放比例
- deltaX：水平方向移动距离
- deltaY：垂直方
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3481