Sự kiện chạm (Touch Events) trong JavaScript

Tổng quan

Touch Events xử lý tương tác người dùng trên thiết bị màn hình cảm ứng (điện thoại, tablet). Bao gồm 4 sự kiện chính:

Đối tượng TouchEvent

Mỗi sự kiện chứa:

• touches: Danh sách tất cả ngón tay đang chạm màn hình
• targetTouches: Ngón tay chạm trên element mục tiêu
• changedTouches: Ngón tay thay đổi trong sự kiện này

Ví dụ: Xử lý touchstart

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Touch Events</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; padding: 20px; }
        .sample { font-size: 18px; color: #d32f2f; font-weight: 500; padding: 20px; background: #ffebee; border-radius: 4px; cursor: pointer; user-select: none; }
        .result { font-size: 18px; color: #6a1b9a; font-weight: 500; margin-top: 20px; padding: 20px; background: #f3e5f5; border-radius: 4px; min-height: 50px; }
        h3 { color: #555; }
    </style>
</head>
<body>
    <h1>Touch Events trong JavaScript</h1>
    <div class="sample" id="sample">Chạm vào vùng này</div>
    <div class="result" id="result"></div>
    <h3>Chạm vào đoạn văn trên để thấy sự kiện</h3>

    <script>
        const sampleEle = document.getElementById('sample');
        const resultEle = document.getElementById('result');

        sampleEle.addEventListener('touchstart', (e) => {
            resultEle.innerHTML = `✅ touchstart kích hoạt! Số ngón tay: ${e.touches.length}`;
            sampleEle.style.background = '#c8e6c9';
        });

        sampleEle.addEventListener('touchend', (e) => {
            resultEle.innerHTML += ` <br> ✅ touchend kích hoạt!`;
            sampleEle.style.background = '#ffebee';
        });

        sampleEle.addEventListener('touchmove', (e) => {
            // Ngăn cuộn trang khi di chuyển
            e.preventDefault();
            const touch = e.touches[0];
            resultEle.innerHTML = `👆 touchmove: X=${touch.clientX}, Y=${touch.clientY}`;
        });
    </script>
</body>
</html>

Kết quả

Khi chạm vào vùng đỏ: hiển thị "touchstart kích hoạt!" và đổi màu xanh.
Khi di chuyển: hiển thị tọa độ X, Y.
Khi nhấc tay: hiển thị "touchend kích hoạt!".

Lưu ý quan trọng

• Luôn test trên thiết bị thật hoặc DevTools Device Toolbar (F12 → Ctrl+Shift+M).
• Sử dụng e.preventDefault() trong touchmove để ngăn cuộn trang.
• Trên desktop, các sự kiện chuột (click, mousedown) vẫn hoạt động song song.
• Cân nhắc dùng Pointer Events cho cách tiếp cận thống nhất (chuột + chạm + bút).