Sự kiện touchmove trong HTML DOM

Sự kiện touchmove trong HTML DOM được kích hoạt khi chạm được di chuyển trên màn hình chạm.

LƯU Ý - Sự kiện này chỉ dành cho thiết bị chạm.

Cú pháp

Kích hoạt touchmove trong HTML:

ontouchmove = "eventFunction()"

Kích hoạt touchmove trong JavaScript:

eventObject.ontouchmove = eventFunction

Lưu ý: Các ví dụ sự kiện chạm được chạy trên trình soạn thảo HTML trực tuyến được truy cập trên thiết bị di động hoặc hệ thống có hỗ trợ chạm. Điều này cho phép thực hiện các thao tác chạm như chạm màn hình trong 2 giây.

Ví dụ

Dưới đây là ví dụ minh họa sự kiện touchmove:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM touchmove event</title>
  <style>
    * { padding: 2px; margin: 5px; }
    form { width: 70%; margin: 0 auto; text-align: center; }
    #outer { width: 70%; margin: 0 auto; padding: 0; text-align: center; border: 1px solid black; height: 105px; background-color: #28a745; }
    input[type="button"] { border-radius: 10px; }
    #upper { border-bottom: 1px solid black; height: 40px; margin: 0 0 15px 0; background-color: #DC3545; }
    #lower { border-top: 1px solid black; height: 40px; margin: 15px 0 0 0; background-color: #DC3545; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML DOM touchmove event</legend>
      <div id="outer">
        <div id="upper"><h2>Nguy Hiểm</h2></div>
        <div id="lower"><h2>Nguy Hiểm</h2></div>
      </div>
      <input type="button" id="start" value="Bắt Đầu" onclick="gameStart()">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById('divDisplay');
    var gameDisplay = document.getElementById('outer');
    function playGame(event) {
      var x = event.touches[0].clientX;
      var y = event.touches[0].clientY;
      if (y > 95 && y < 110) {
        divDisplay.textContent = 'Tiếp Tục!';
        if (x === 439) {
          divDisplay.textContent = 'Chúc Mừng! Bạn Làm Được!';
          gameDisplay.removeEventListener('touchmove', playGame);
        }
      } else {
        divDisplay.textContent = 'Bạn Di Chuyển Vào Khu VỰC NGUY HIỂM. Bạn Thua!';
        gameDisplay.removeEventListener('touchmove', playGame);
      }
    }
    function gameStart() {
      gameDisplay.addEventListener('touchmove', playGame);
    }
  </script>
</body>
</html>

Kết quả

Sau khi nhấn nút 'Bắt Đầu' và con trỏ ở khu vực xanh (an toàn):

Sau khi nhấn nút 'Bắt Đầu' và con trỏ ở cuối khu vực xanh (an toàn):

Sau khi nhấn nút 'Bắt Đầu' và con trỏ ở khu vực đỏ (nguy hiểm):