Hammer.js: Thư Viện Nhận Cử Chỉ Chạm JavaScript

Hammer.js Là Gì?

Hammer.js là một thư viện JavaScript nhận diện cử chỉ đa chạm trên các phần tử DOM, chuyển thao tác chạm và con trỏ thô thành các sự kiện như tap, press, doubletap và swipe. Bạn gắn nó vào một phần tử bằng new Hammer(element) rồi đăng ký cử chỉ cần theo dõi bằng .on(), giống cách dùng một event listener DOM thông thường. Hammer.js có trên npm dưới tên gói hammerjs, cũng có qua cdnjs, theo giấy phép MIT cho phép dùng thương mại.

Các Cử Chỉ Và Recognizer Được Hỗ Trợ

• ✓Các sự kiện khởi động nhanh press, tap và doubletap hoạt động ngay khi bạn tạo một instance new Hammer(element), không cần cấu hình thêm.
• ✓Cử chỉ swipe được minh họa trong chính các ví dụ CodePen của dự án, bên cạnh tap, double tap và press.
• ✓Một Hammer.Manager cho phép đăng ký recognizer tùy chỉnh, như ví dụ tripletap trong README được dựng từ Hammer.Tap với tùy chọn taps: 3.
• ✓Recognizer được thêm vào manager bằng .add() và đăng ký lắng nghe bằng .on(), giữ đúng mẫu event-listener như các cử chỉ khởi động nhanh.
• ✓Được phân phối dưới dạng gói hammerjs trên npm, cài đặt được bằng npm hoặc Yarn, hoặc tải trực tiếp từ CDN qua cdnjs.
• ✓Giấy phép MIT, nên logic nhận diện cử chỉ có thể nhúng vào sản phẩm closed-source hay thương mại.

Bắt Đầu Với Hammer.js

Đường đi khởi động nhanh, lấy thẳng từ README: lấy tham chiếu tới một phần tử, bọc nó bằng `var hammer = new Hammer(square);`, rồi đăng ký bằng `hammer.on('press', function(e) { ... });` — press, tap và doubletap đều hoạt động theo cách này mà không cần thiết lập gì thêm. Với một cử chỉ không nằm trong danh sách khởi động nhanh đó, như triple-tap, README hướng dẫn tự dựng: tạo `var manager = new Hammer.Manager(square);`, định nghĩa recognizer bằng `new Hammer.Tap({ event: 'tripletap', taps: 3 })`, thêm nó bằng `manager.add(TripleTap)`, rồi đăng ký bằng `manager.on('tripletap', function(e) { ... });`.

Các Trường Hợp Sử Dụng Phổ Biến

• •Thêm tương tác swipe-to-dismiss hoặc swipe-to-navigate cho một gallery hay carousel trên web di động.
• •Gắn hành động press-and-hold vào một giao diện cảm ứng bằng sự kiện press có sẵn, thay vì tự viết timer touchstart/touchend.
• •Nhận diện double-tap hoặc một cử chỉ multi-tap tùy chỉnh, như ví dụ tripletap trong README, trên trình xem ảnh hoặc widget bản đồ.
• •Thêm hỗ trợ cử chỉ chạm cho một component vanilla JS hoặc không phụ thuộc framework, mà không cần kéo theo cả một hệ thống gesture của UI framework.

Lựa Chọn Thay Thế Cho Hammer.js

Câu Hỏi Thường Gặp

Vấn Đề Mà Hammer.js Giải Quyết

Nhận diện một cú swipe hay long-press trên trình duyệt thường đòi hỏi tự lắng nghe các sự kiện touchstart/touchmove/touchend hoặc pointer thô, tự theo dõi vị trí bắt đầu, khoảng cách và thời gian, rồi lặp lại việc đó cho từng phần tử. README của Hammer.js mô tả đúng khoảng trống này: gắn thư viện vào một phần tử, nó phát ra các sự kiện có tên như press, tap và doubletap thay vì bạn phải tự viết logic theo dõi đó từ đầu.

Cách Cài Đặt / Dùng Thử

Cài từ npm bằng `npm install --save hammerjs`, hoặc bằng Yarn với `yarn add hammerjs`. Nếu không muốn qua bước build, cdnjs cung cấp hammer.js để dùng trực tiếp bằng thẻ `<script>`. Ngoài ra, README không nêu rõ phiên bản trình duyệt hay bundler tối thiểu.

Nên Thử Hammer.js — Và Ai Nên Bỏ Qua

Người phù hợp với Hammer.js là developer đang gắn hỗ trợ cảm ứng vào một carousel, trình xem ảnh, hay component UI tùy chỉnh bằng vanilla JS — các sự kiện khởi động nhanh có sẵn press, tap và doubletap mà không cần thiết lập gì thêm, còn ví dụ tripletap trong chính README cho thấy cách gắn thêm cử chỉ khác. Nếu dự án cần pinch, rotate, hay drag-and-resize như cử chỉ dựng sẵn, hoặc muốn có type TypeScript và binding framework đi kèm, không điều nào trong số đó được README nêu ra, nên hãy tính thời gian tự xây hoặc tìm lựa chọn khác.