Đối tượng TouchEvent trong HTML DOM

Đối tượng TouchEvent trong HTML DOM đại diện cho một sự kiện xảy ra khi tương tác với các phần tử tài liệu HTML bằng thiết bị chạm.

Đối tượng "TouchEvent" có thể có các thuộc tính và phương thức sau:

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 ctrlKey:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM TouchEvent ctrlKey</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    legend { border-color: #dc3545; }
    span { display: inline-block; width: 40px; height: 20px; margin: 1px; color: #fff; border: 3px solid black; }
    div span:nth-child(1) { background-color: #FF8A00; }
    div span:nth-child(2) { background-color: #F44336; }
    div span:nth-child(3) { background-color: #03A9F4; }
    div span:nth-child(4) { background-color: #4CAF50; }
  </style>
</head>
<body>
  <form id="formSelect" ontouchstart="eventAction(event)">
    <fieldset>
      <legend>HTML-DOM-TouchEvent-ctrlKey</legend>
      <label for="textSelect">Thay Đổi Màu Nền</label>
      <div><span>Alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
      <div id="divDisplay">Không Có Phím Tắt Được Nhấn</div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var formSelect = document.getElementById("formSelect");
    function eventAction(event) {
      if (event.ctrlKey) {
        formSelect.style.backgroundColor = '#F44336';
        formSelect.style.color = '#FFF';
        divDisplay.textContent = 'Phím Ctrl Được Nhấn';
      }
    }
  </script>
</body>
</html>

Kết quả

Trước khi kích hoạt sự kiện chạm:

Sau khi kích hoạt sự kiện chạm với phím Alt được nhấn:

Ngoài ra, "TouchEvent" có thể có các loại sự kiện sau:

Ví dụ sự kiện ontouchend

<!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 màn hình nút 'Giữ Lại':