Sự kiện touchend trong HTML DOM

Sự kiện touchend trong HTML DOM được kích hoạt khi chạm bị loại bỏ khỏi 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 touchend trong HTML:

ontouchend = "eventFunction()"

Kích hoạt touchend trong JavaScript:

eventObject.ontouchend = eventFunction

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM touchend 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-touchend-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 nút 'Giữ Lại':