Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Thuộc tính touches của TouchEvent trong HTML DOM

Thuộc tính touches của TouchEvent trong HTML DOM trả về một đối tượng TouchList tương ứng với danh sách tất cả các điểm tiếp xúc được kích hoạt trên bề mặt chạm.

LƯU Ý: Nếu chạm được kích hoạt trên nút được chỉ định hoặc bất kỳ nút con nào thì các chạm tiếp theo sẽ được tính ngay cả khi chúng không được kích hoạt trên cùng nút đó.

Cú pháp

event.touches

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 thuộc tính TouchEvent touches:

<!DOCTYPE html>
<html>
<head>
  <title>TouchEvent touches</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form id="formSelect" ontouchstart="startEventAction(event)" ontouchend="endEventAction(event)">
    <fieldset>
      <legend>TouchEvent-touches</legend>
      <label for="textSelect">Chọn Người Chơi Game</label>
      <div id="divDisplay">Tất Cả Người Chơi Đặt Ngón Tay Lên Màn Hình<br>Game Bắt Đầu Sau 2 Giây</div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var gameSelect = document.getElementById("formSelect");
    var duration = 2000;
    var timer;
    gameSelect.ontouchstart = startEventAction;
    function startEventAction(event) {
      timer = setTimeout(function() {
        eventAction(event)
      }, duration);
    }
    function endEventAction(event) {
      if (timer) clearTimeout(timer);
      eventAction(event);
    }
    function eventAction(event) {
      var players = event.touches.length;
      divDisplay.textContent = 'Tổng Số Người Chơi: ' + players;
      gameSelect.removeAttribute('ontouchstart');
      gameSelect.removeAttribute('ontouchend');
    }
  </script>
</body>
</html>

Kết quả

Trước khi chạm vào phần tử form:

Thuộc tính touches của TouchEvent trong HTML DOM

Sau khi chạm phần tử form trong 2 giây:

Thuộc tính touches của TouchEvent trong HTML DOM