Sự kiện touchstart trong HTML DOM

Sự kiện touchstart trong HTML DOM được kích hoạt khi màn hình chạm được chạm vào.

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

Cú pháp

Kích hoạt touchstart trong HTML:

ontouchstart = "eventFunction()"

Kích hoạt touchstart trong JavaScript:

eventObject.ontouchstart = 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 touchstart:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM touchstart event</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 50%; font-size: 20px; padding: 20px; border: 5px solid rgb(220, 53, 69); background: rgba(220, 53, 69, 0.5); color: #fefefe; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-touchstart-event</legend>
      <label for="textSelect">Thời Gian Chơi Game</label>
      <input type="button" id="gameSelect" value="Giữ Lại">
      <div id="divDisplay">Giữ Trong 1 - Giây Để Thắng</div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var gameSelect = document.getElementById("gameSelect");
    var duration = 1000;
    var timer;
    gameSelect.ontouchstart = startEventAction;
    function startEventAction() {
      timer = setTimeout(victory, duration);
    }
    gameSelect.ontouchend = endEventAction;
    function endEventAction() {
      if (timer) clearTimeout(timer);
    }
    function victory() {
      divDisplay.textContent = "Bạn Thắng"
    }
  </script>
</body>
</html>

Kết quả

Trước khi chạm nút 'Giữ Lại':

Sau khi chạm màn hình nút 'Giữ Lại':