Nhận dạng cử chỉ trên màn hình cảm ứng đơn giản bằng JavaScript thuần túy để phát hiện thao tác vuốt lên, xuống, trái và phải bằng một con trỏ. Sẽ rất hữu ích khi vuốt để hiển thị/ẩn menu (vuốt trên e. mục tiêu) hoặc gạt sang trái/phải để kiểm soát vị trí trình chiếu

Cách tạo tính năng phát hiện vuốt chạm bằng JavaScript thuần túy

1. Trước hết, tạo cấu trúc HTML như sau

 
Swipe to Detect Gestures
(touchscreen only)
 
     

     
Swipe here
     

2. Sau đó, thêm các kiểu CSS sau vào dự án của bạn

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  color: #1c5706;
  background: #013;
  position: fixed;
  top: 0;
  left: 0;
}
h1, div {
  text-align: center;
  transition: opacity .5s ease-in-out;
}
#surface{
    width: 100%;
    height: 360px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    margin: 14px 0;
}

3. Cuối cùng, thêm đoạn mã JavaScript sau và hoàn tất

var gesture = {
      x: [],
      y: [],
      match: ''
    },
    tolerance = 100,
    output = document.getElementById('output');

var surface = document.getElementById('surface');

surface.addEventListener('touchstart',function(e){
  e.preventDefault()
  for (i=0;i-tolerance && yTravel<-tolerance){
    gesture.match = 'Swiped Up'
  }
  if (xTravel-tolerance && yTravel>tolerance){
    gesture.match = 'Swiped Down'
  }
  if (yTravel-tolerance && xTravel<-tolerance){
    gesture.match = 'Swiped Left'
  }
  if (yTravel-tolerance && xTravel>tolerance){
    gesture.match = 'Swiped Right'
  }
  if (gesture.match!==''){
    output.innerHTML = gesture.match
    output.style.opacity = 1
  }
  setTimeout(function(){
    output.style.opacity = 1
  },500)
  gesture.x = []
  gesture.y = []
  gesture.match = xTravel = yTravel = ''
  for (i=0;i
Đó là tất cả. hy vọng bạn đã tích hợp thành công đoạn mã phát hiện vuốt chạm này vào dự án của mình. Nếu bạn có bất kỳ câu hỏi hoặc gặp phải bất kỳ vấn đề nào, vui lòng bình luận bên dưới



 
Thuộc tính CSS touch-action được sử dụng để thay đổi chế độ xem của phần tử đã chọn liên quan đến thay đổi khi chạm của người dùng, Ví dụ: phóng to hình ảnh, cuộn hình ảnh, v.v. Đó là hành động được thực hiện bởi người dùng màn hình cảm ứng trên một vùng cụ thể được chọn trên màn hình
 
Các hàng hoặc mục trong danh sách của bảng thường có các tác vụ liên quan đến chúng, chẳng hạn như xóa, chia sẻ và chỉnh sửa. Khi thiết kế cho thiết bị cảm ứng, nhà thiết kế có thể tận dụng cử chỉ vuốt để cho phép người dùng thực hiện nhanh các tác vụ thông thường mà không cần phải điều hướng đến trang khác hoặc mở ngăn kéo hoặc hộp thoại phương thức
Các tương tác dựa trên cử chỉ được hỗ trợ bởi các ngôn ngữ di động bản địa, nhưng có thể khó triển khai trong HTML/CSS/JS và thường được thực hiện quá mức khi sử dụng quá nhiều JavaScript, điều này có thể gây ra hiệu suất thấp và tương tác lộn xộn
Trong bài đăng này, tôi sẽ hướng dẫn 3 bước đơn giản để xây dựng tương tác cử chỉ vuốt chỉ bằng HTML, CSS và một chút JS
Ghi chú. các bản demo trong bài đăng này nên được sử dụng trên các thiết bị cảm ứng



Những yêu cầu cơ bản
Hãy bắt đầu bằng cách xác định những gì chúng ta muốn xây dựng. Đoạn mã vuốt của chúng tôi sẽ cho phép người dùng
Sử dụng cảm ứng để vuốt một hàng của bảng sang phải hoặc sang trái
Hiển thị một hành động (biểu tượng và nền màu) khi người dùng vuốt
Tự động khôi phục vị trí cuộn khi người dùng thả ngón tay
Kích hoạt một hành động khi người dùng thả ngón tay ra (trong trường hợp họ đã vuốt đủ xa)
1. Đặt phần tử có thể vuốt
Bước đầu tiên, hãy tạo phần tử có thể vuốt và thêm các kiểu cơ bản vào phần tử đó. Để tạo kiểu cho nó, nó được cấp một lớp tên là .swipe-element
Để tạo tiền đề cho tương tác vuốt, chúng ta có thể bọc phần tử xung quanh một div có tên lớp là .swipe-container
Để giảm sự lộn xộn về mặt hình ảnh, .swipe-container nên ẩn thanh cuộn
Để tự động khôi phục vị trí cuộn, .swipe-container phải có scroll-snap-type: x mandatory
Để cho biết phần tử nào sẽ được lấy nét khi tự động khôi phục vị trí cuộn, swipe-element phải có scroll-snap-align: start
2. Thêm các hành động trái và phải
Với vùng chứa và logic cuộn tại chỗ, bước tiếp theo là thêm các hành động



Các biểu tượng được sử dụng trong ví dụ này là từ phông chữ Biểu tượng Vật liệu
Là một trình bao bọc cho biểu tượng, div 
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  color: #1c5706;
  background: #013;
  position: fixed;
  top: 0;
  left: 0;
}
h1, div {
  text-align: center;
  transition: opacity .5s ease-in-out;
}
#surface{
    width: 100%;
    height: 360px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    margin: 14px 0;
}
0, cũng như .swipe-element đã thêm trước đó phải có 
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  color: #1c5706;
  background: #013;
  position: fixed;
  top: 0;
  left: 0;
}
h1, div {
  text-align: center;
  transition: opacity .5s ease-in-out;
}
#surface{
    width: 100%;
    height: 360px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    margin: 14px 0;
}
2
Biểu tượng .swipe-container0 phải có .swipe-container1 để đảm bảo nó luôn hiển thị ngay khi người dùng bắt đầu vuốt
hành động .swipe-container2 phải có .swipe-container3 để làm cho biểu tượng dính vào bên phải
3. Kích hoạt hành động
Khi người dùng thả ngón tay ra, phần tử của chúng ta sẽ kiểm tra xem người dùng đã vuốt bao xa và kích hoạt một hành động trong trường hợp họ đã thực hiện đủ xa
Cần có sự phân biệt giữa vuốt trái và vuốt phải để ứng dụng có thể xử lý chúng một cách độc lập
Để bắt đầu, một trình lắng nghe sự kiện .swipe-container4 nên được thêm vào .swipe-container
Trong một chức năng có tên là .swipe-container6, trước tiên chúng ta nên xác định .swipe-container7 mà người dùng sẽ vuốt để kích hoạt hành động
Sau đó, chúng ta nên tính toán .swipe-container8 bằng cách trừ đi .swipe-container9 của container từ .swipe-container0 của nó.
Giá trị âm biểu thị thao tác vuốt sang trái, trong khi giá trị dương biểu thị thao tác vuốt sang phải. Trong trường hợp .swipe-container8 nhỏ hơn .swipe-container2, chúng ta nên kích hoạt hành động bên trái và nếu nó lớn hơn .swipe-container7, thì nên kích hoạt hành động bên phải để thay thế
Trong trường hợp người dùng chưa vuốt sang trái hoặc phải xa hơn minDistance, sẽ không có gì được kích hoạt
Phần kết luận
Bằng cách sử dụng các bộ chọn CSS tiêu chuẩn, chúng tôi đã xây dựng một phần tử có thể vuốt có thể được sử dụng để nâng cao trải nghiệm người dùng về danh sách và bảng trên thiết bị di động
Với một số chỉnh sửa và một chút trí tưởng tượng, đoạn mã này có thể được sửa đổi hoặc mở rộng để chỉ hiển thị một hành động hoặc cho biết trực quan liệu người dùng đã vuốt đủ xa chưa, chẳng hạn