【亲测免费】 Hammer.js 使用教程

2026-01-20 01:41:22作者：董灵辛Dennis

1. 项目介绍

Hammer.js 是一个用于检测触摸手势的 JavaScript 库。它支持多种触摸手势，如点击、双击、长按、滑动等，使得开发者可以轻松地为网页添加多点触控功能。Hammer.js 是一个开源项目，托管在 GitHub 上，拥有广泛的社区支持和丰富的文档资源。

2. 项目快速启动

安装

你可以通过以下几种方式安装 Hammer.js：

NPM:
```
npm install --save hammerjs
```
Yarn:
```
yarn add hammerjs
```

CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

使用示例

以下是一个简单的示例，展示如何使用 Hammer.js 检测点击手势：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hammer.js 示例</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="square"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script>
        // 获取元素引用
        var square = document.querySelector('.square');

        // 创建 Hammer 实例
        var hammer = new Hammer(square);

        // 订阅点击事件
        hammer.on('tap', function(e) {
            e.target.classList.toggle('expand');
            console.log("你点击了我！");
            console.log(e);
        });
    </script>
</body>
</html>

3. 应用案例和最佳实践

应用案例

图片画廊: 使用 Hammer.js 实现图片的滑动切换功能，提升用户体验。
移动端游戏: 在移动端游戏中使用 Hammer.js 检测玩家的手势操作，如滑动、点击等。
网页导航: 通过 Hammer.js 实现手势导航，如左右滑动切换页面。

最佳实践

性能优化: 避免在 Hammer.js 中过度使用事件监听器，尤其是在复杂的页面中，以减少性能开销。
自定义手势: 根据项目需求，自定义手势识别器，如三击手势、长按手势等。
兼容性: 确保 Hammer.js 在不同设备和浏览器上的兼容性，特别是在移动端设备上。

4. 典型生态项目

React Hammerjs: 一个用于在 React 应用中集成 Hammer.js 的库，简化在 React 组件中使用 Hammer.js 的过程。
Vue Hammer: 一个用于在 Vue.js 应用中集成 Hammer.js 的插件，提供 Vue 组件级别的手势支持。
Angular Hammer: 一个用于在 Angular 应用中集成 Hammer.js 的模块，使得在 Angular 项目中使用 Hammer.js 更加方便。

通过以上模块的介绍，你可以快速上手 Hammer.js，并在实际项目中应用它来增强网页的交互体验。

hammer.js

A javascript library for multi-touch gestures :// You can touch this

项目地址：https://gitcode.com/gh_mirrors/ha/hammer.js

登录后查看全文