M

MLOG

Tiếng Việt

Khám phá thế giới cử chỉ cảm ứng và học cách triển khai chúng trong các dự án JavaScript của bạn. Hướng dẫn này bao gồm mọi thứ từ các sự kiện chạm cơ bản đến các kỹ thuật nhận dạng cử chỉ nâng cao.

Cử chỉ cảm ứng: Hướng dẫn toàn diện về triển khai bằng JavaScript

Trong thế giới ưu tiên di động ngày nay, cử chỉ cảm ứng đã trở thành một phần không thể thiếu của trải nghiệm người dùng. Từ những lần nhấn đơn giản đến các tương tác phức tạp bằng nhiều ngón tay, cử chỉ cảm ứng cung cấp một cách tự nhiên và trực quan để người dùng tương tác với các ứng dụng web. Hướng dẫn toàn diện này khám phá thế giới của cử chỉ cảm ứng và cung cấp một cách tiếp cận từng bước để triển khai chúng trong các dự án JavaScript của bạn.

Hiểu về các sự kiện chạm

Trước khi đi sâu vào nhận dạng cử chỉ, điều quan trọng là phải hiểu các sự kiện chạm cơ bản cung cấp năng lượng cho các tương tác này. JavaScript cung cấp một bộ các sự kiện được kích hoạt khi người dùng chạm vào màn hình. Các sự kiện này cung cấp thông tin về lần chạm, chẳng hạn như vị trí và trạng thái của nó.

Các sự kiện chạm cơ bản:

Mỗi sự kiện này chứa một thuộc tính `touches`, là một danh sách các đối tượng `Touch`. Mỗi đối tượng `Touch` đại diện cho một điểm tiếp xúc duy nhất trên màn hình và chứa thông tin như:

Ví dụ: Ghi lại tọa độ chạm

Ví dụ đơn giản này minh họa cách ghi lại tọa độ của một điểm chạm khi người dùng chạm vào màn hình:


 document.addEventListener('touchstart', function(event) {
  event.preventDefault(); // Ngăn chặn hành vi mặc định của trình duyệt (ví dụ: cuộn)
  let touch = event.touches[0];
  console.log('Chạm bắt đầu tại X: ' + touch.clientX + ', Y: ' + touch.clientY);
 });

Lưu ý: Phương thức `preventDefault()` thường được sử dụng để ngăn trình duyệt thực hiện hành vi chạm mặc định của nó, chẳng hạn như cuộn hoặc thu phóng.

Triển khai các cử chỉ cơ bản

Với sự hiểu biết vững chắc về các sự kiện chạm, giờ đây chúng ta có thể triển khai các cử chỉ cơ bản. Hãy xem xét các ví dụ như nhấn, vuốt và kéo. Những cử chỉ này sẽ được giải thích bằng cách định nghĩa chúng là gì, sau đó cung cấp các ví dụ bằng Javascript.

Cử chỉ nhấn (Tap)

Cử chỉ nhấn là một lần chạm và thả nhanh trên màn hình. Để triển khai cử chỉ nhấn, chúng ta có thể theo dõi các sự kiện `touchstart` và `touchend` và đo lường sự khác biệt về thời gian giữa chúng. Nếu sự khác biệt về thời gian dưới một ngưỡng nhất định (ví dụ: 200 mili giây), chúng ta coi đó là một lần nhấn.


 let tapStartTime = null;

 document.addEventListener('touchstart', function(event) {
  tapStartTime = new Date().getTime();
 });

 document.addEventListener('touchend', function(event) {
  let tapEndTime = new Date().getTime();
  let tapDuration = tapEndTime - tapStartTime;

  if (tapDuration < 200) {
   console.log('Đã phát hiện cử chỉ nhấn!');
  }
 });

Cử chỉ vuốt (Swipe)

Cử chỉ vuốt là một chuyển động nhanh, có hướng trên màn hình. Để phát hiện một cú vuốt, chúng ta cần theo dõi vị trí bắt đầu và kết thúc của lần chạm và tính toán khoảng cách và hướng của chuyển động. Chúng ta cũng cần xem xét thời gian của cú vuốt.


 let swipeStartX = null;
 let swipeStartY = null;

 document.addEventListener('touchstart', function(event) {
  swipeStartX = event.touches[0].clientX;
  swipeStartY = event.touches[0].clientY;
 });

 document.addEventListener('touchend', function(event) {
  let swipeEndX = event.changedTouches[0].clientX;
  let swipeEndY = event.changedTouches[0].clientY;
  let deltaX = swipeEndX - swipeStartX;
  let deltaY = swipeEndY - swipeStartY;
  let swipeDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

  if (swipeDistance > 50) { // Điều chỉnh ngưỡng khi cần thiết
   let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;

   if (angle > -45 && angle <= 45) {
    console.log('Vuốt sang phải!');
   } else if (angle > 45 && angle <= 135) {
    console.log('Vuốt xuống!');
   } else if (angle > 135 || angle <= -135) {
    console.log('Vuốt sang trái!');
   } else {
    console.log('Vuốt lên!');
   }
  }
 });

Cử chỉ kéo (Drag)

Cử chỉ kéo bao gồm việc chạm vào một phần tử và di chuyển nó trên màn hình. Để triển khai cử chỉ kéo, chúng ta cần theo dõi sự kiện touchmove và cập nhật vị trí của phần tử một cách tương ứng.


 let dragging = false;
 let offsetX, offsetY;
 let element = document.getElementById('draggableElement');

 element.addEventListener('touchstart', function(event) {
  dragging = true;
  offsetX = event.touches[0].clientX - element.offsetLeft;
  offsetY = event.touches[0].clientY - element.offsetTop;
 });

 document.addEventListener('touchmove', function(event) {
  if (dragging) {
   element.style.left = (event.touches[0].clientX - offsetX) + 'px';
   element.style.top = (event.touches[0].clientY - offsetY) + 'px';
  }
 });

 document.addEventListener('touchend', function(event) {
  dragging = false;
 });

Hãy chắc chắn rằng bạn có một phần tử với id "draggableElement" trong HTML của mình:


 
Kéo tôi!

Cử chỉ đa chạm

Cử chỉ đa chạm bao gồm việc sử dụng nhiều ngón tay để tương tác với màn hình. Điều này cho phép các tương tác phức tạp và biểu cảm hơn, chẳng hạn như chụm để thu phóng và xoay.

Chụm để thu phóng (Pinch-to-Zoom)

Chụm để thu phóng là một cử chỉ phổ biến được sử dụng để phóng to và thu nhỏ hình ảnh hoặc bản đồ. Để triển khai cử chỉ chụm để thu phóng, chúng ta cần theo dõi khoảng cách giữa hai điểm chạm và điều chỉnh tỷ lệ của phần tử một cách tương ứng.


 let initialDistance = null;
 let currentScale = 1;
 let element = document.getElementById('zoomableImage');

 function getDistance(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  let x = touch2.clientX - touch1.clientX;
  let y = touch2.clientY - touch1.clientY;
  return Math.sqrt(x * x + y * y);
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialDistance = getDistance(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentDistance = getDistance(event);
   let scaleFactor = currentDistance / initialDistance;
   currentScale *= scaleFactor; // Tích lũy tỷ lệ
   element.style.transform = 'scale(' + currentScale + ')';
   initialDistance = currentDistance; // Đặt lại cho chuyển động tiếp theo
  }
 });

 element.addEventListener('touchend', function(event) {
  initialDistance = null;
 });

Hãy chắc chắn rằng bạn có một hình ảnh với id "zoomableImage" trong HTML của mình:

Xoay (Rotation)

Xoay liên quan đến việc xoay một phần tử bằng hai ngón tay. Để triển khai xoay, chúng ta cần theo dõi góc giữa hai điểm chạm và xoay phần tử một cách tương ứng.


 let initialAngle = null;
 let currentRotation = 0;
 let element = document.getElementById('rotatableImage');

 function getAngle(event) {
  let touch1 = event.touches[0];
  let touch2 = event.touches[1];
  return Math.atan2(touch2.clientY - touch1.clientY, touch2.clientX - touch1.clientX) * 180 / Math.PI;
 }

 element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
   initialAngle = getAngle(event);
  }
 });

 element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
   event.preventDefault();
   let currentAngle = getAngle(event);
   let rotation = currentAngle - initialAngle;
   currentRotation += rotation; // Tích lũy phép xoay
   element.style.transform = 'rotate(' + currentRotation + 'deg)';
   initialAngle = currentAngle; // Đặt lại cho chuyển động tiếp theo
  }
 });

 element.addEventListener('touchend', function(event) {
  initialAngle = null;
 });

Hãy chắc chắn rằng bạn có một hình ảnh với id "rotatableImage" trong HTML của mình:

Các thư viện nhận dạng cử chỉ

Việc triển khai các cử chỉ phức tạp từ đầu có thể khó khăn và tốn thời gian. May mắn thay, có một số thư viện JavaScript có thể đơn giản hóa quá trình nhận dạng cử chỉ. Các thư viện này cung cấp các trình nhận dạng cử chỉ được xây dựng sẵn và các tiện ích để xử lý các sự kiện chạm.

Hammer.js

Hammer.js là một thư viện JavaScript phổ biến để nhận dạng cử chỉ. Nó hỗ trợ một loạt các cử chỉ, bao gồm nhấn, nhấn đúp, vuốt, chụm, xoay và lia. Nó nhẹ, dễ sử dụng và có khả năng tùy biến cao. Hammer.js hoạt động bằng cách lắng nghe các sự kiện chạm và sau đó xác định hành động mà người dùng đang thực hiện dựa trên vị trí và thời gian của các điểm chạm.


 // Bao gồm Hammer.js trong HTML của bạn
 // 

 let element = document.getElementById('myElement');
 let hammer = new Hammer(element);

 hammer.on('tap', function(event) {
  console.log('Đã phát hiện sự kiện nhấn');
 });

 hammer.on('swipe', function(event) {
  console.log('Đã phát hiện sự kiện vuốt');
  console.log('Hướng vuốt: ' + event.direction);
 });

 hammer.get('pinch').set({ enable: true });
 hammer.get('rotate').set({ enable: true });

 hammer.on('pinch', function(event) {
  console.log('Đã phát hiện sự kiện chụm');
  element.style.transform = 'scale(' + event.scale + ')';
 });

 hammer.on('rotate', function(event) {
  console.log('Đã phát hiện sự kiện xoay');
  element.style.transform = 'rotate(' + event.rotation + 'deg)';
 });

AlloyFinger

AlloyFinger là một thư viện JavaScript phổ biến khác chuyên về nhận dạng cử chỉ, đặc biệt dành cho thiết bị di động. Nó được biết đến với kích thước nhỏ và hiệu suất tốt. Nó tập trung vào các cử chỉ chạm phổ biến như nhấn, vuốt, chụm, xoay và nhấn giữ. Nó cung cấp một API dễ sử dụng để liên kết các cử chỉ với các phần tử.


 // Bao gồm AlloyFinger trong HTML của bạn
 //  // Thay thế bằng đường dẫn AlloyFinger của bạn

 let element = document.getElementById('myElement');
 let af = new AlloyFinger(element, {
  tap: function() {
   console.log('Đã phát hiện sự kiện nhấn');
  },
  swipe: function(evt) {
   console.log('Đã phát hiện sự kiện vuốt');
   console.log('Hướng vuốt: ' + evt.direction); // up, down, left, right
  },
  pinch: function(evt) {
   console.log('Đã phát hiện sự kiện chụm');
   element.style.transform = 'scale(' + evt.scale + ')';
  },
  rotate: function(evt) {
   console.log('Đã phát hiện sự kiện xoay');
   element.style.transform = 'rotate(' + evt.angle + 'deg)';
  }
 });

Những lưu ý về khả năng tiếp cận

Khi triển khai các cử chỉ cảm ứng, điều cần thiết là phải xem xét khả năng tiếp cận cho người dùng khuyết tật. Một số người dùng có thể không sử dụng được cử chỉ cảm ứng do suy giảm khả năng vận động. Việc cung cấp các phương thức nhập liệu thay thế, chẳng hạn như điều khiển bằng bàn phím hoặc lệnh thoại, đảm bảo rằng ứng dụng của bạn có thể tiếp cận được với nhiều đối tượng người dùng hơn.

Tối ưu hóa hiệu suất

Các sự kiện chạm có thể tốn nhiều tài nguyên tính toán, đặc biệt là khi xử lý các cử chỉ phức tạp. Tối ưu hóa mã của bạn để có hiệu suất tốt là rất quan trọng để đảm bảo trải nghiệm người dùng mượt mà và nhạy bén.

Khả năng tương thích đa trình duyệt

Hỗ trợ sự kiện chạm khác nhau giữa các trình duyệt và thiết bị khác nhau. Điều quan trọng là phải kiểm tra mã của bạn trên nhiều loại trình duyệt và thiết bị để đảm bảo khả năng tương thích đa trình duyệt. Hãy cân nhắc sử dụng polyfill hoặc các thư viện giúp trừu tượng hóa sự khác biệt của trình duyệt.

Những lưu ý về quốc tế hóa (i18n)

Khi triển khai các cử chỉ cảm ứng, hãy nhớ xem xét đến vấn đề quốc tế hóa (i18n). Mặc dù bản thân các tương tác chạm thường không phụ thuộc vào ngôn ngữ, các yếu tố giao diện người dùng và cơ chế phản hồi xung quanh nên được bản địa hóa cho các ngôn ngữ và khu vực khác nhau.

Ví dụ và cân nhắc trên toàn cầu

Hãy xem xét cách các cử chỉ cảm ứng có thể được áp dụng khác nhau trong các bối cảnh toàn cầu khác nhau:

Kết luận

Cử chỉ cảm ứng là một công cụ mạnh mẽ để tạo ra trải nghiệm người dùng hấp dẫn và trực quan. Bằng cách hiểu các sự kiện chạm cơ bản và sử dụng các kỹ thuật nhận dạng cử chỉ phù hợp, bạn có thể triển khai một loạt các cử chỉ trong các dự án JavaScript của mình. Hãy nhớ xem xét khả năng tiếp cận, hiệu suất và khả năng tương thích đa trình duyệt để đảm bảo rằng ứng dụng của bạn hoạt động tốt cho tất cả người dùng. Khi công nghệ tiến bộ, hãy mong đợi được thấy các loại cử chỉ và tương tác mới, tiếp tục học hỏi để luôn đi đầu trong các trải nghiệm kỹ thuật số.