เหตุการณ์สัมผัส (Touch Events) ใน JavaScript

Touch Events เป็นเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้โต้ตอบกับหน้าจอสัมผัส (Touchscreen) เช่น โทรศัพท์มือถือ แท็บเล็ต หรือแล็ปท็อปที่มีหน้าจอสัมผัส

ประเภทของ Touch Events

ออบเจ็กต์ TouchEvent

แต่ละเหตุการณ์จะมีคุณสมบัติสำคัญดังนี้:

• touches - รายการนิ้วที่สัมผัสอยู่ในปัจจุบัน
• targetTouches - รายการนิ้วที่สัมผัสอยู่บนองค์ประกอบเป้าหมาย
• changedTouches - รายการนิ้วที่เปลี่ยนแปลงในเหตุการณ์นี้

ตัวอย่าง: ตรวจจับเหตุการณ์ touchstart

<!DOCTYPE html>
<html lang="th">
<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", Tahoma, Geneva, Verdana, sans-serif; }
        .result, .sample { font-size: 18px; font-weight: 500; }
        .sample { color: red; }
        .result { color: blueviolet; }
        .sample { padding: 20px; background: #f0f0f0; margin: 10px 0; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Touch Events ใน JavaScript</h1>
    <div class="sample">สัมผัสที่นี่เพื่อทดสอบ touchstart</div>
    <div class="result"></div>
    <h3>สัมผัสพารากราฟด้านบนเพื่อดูเหตุการณ์ที่เกิดขึ้น</h3>

    <script>
        let resEle = document.querySelector(".result");
        let sampleEle = document.querySelector(".sample");
        
        sampleEle.addEventListener("touchstart", (e) => {
            resEle.innerHTML = "✅ เหตุการณ์ touchstart ถูกกระตุ้น<br>";
            resEle.innerHTML += "จำนวนนิ้วที่สัมผัส: " + e.touches.length + "<br>";
            resEle.innerHTML += "พิกัด X: " + e.touches[0].clientX + ", Y: " + e.touches[0].clientY;
        });
        
        sampleEle.addEventListener("touchmove", (e) => {
            e.preventDefault(); // ป้องกันการเลื่อนหน้าจอ
            resEle.innerHTML = "👆 เหตุการณ์ touchmove - กำลังลากนิ้ว<br>";
            resEle.innerHTML += "พิกัด X: " + e.touches[0].clientX + ", Y: " + e.touches[0].clientY;
        });
        
        sampleEle.addEventListener("touchend", () => {
            resEle.innerHTML = "👋 เหตุการณ์ touchend - ยกนิ้วขึ้นแล้ว";
        });
    </script>
</body>
</html>

ข้อควรระวัง

• บนอุปกรณ์เดสก์ท็อปที่ไม่มีหน้าจอสัมผัส จะไม่สามารถทดสอบได้จริง (ต้องใช้ DevTools Device Toolbar)
• เหตุการณ์ touchmove ควรใช้ e.preventDefault() เพื่อป้องกันการเลื่อนหน้าจอ (Scroll) พร้อมกัน
• สำหรับการรองรับทั้งเมาส์และสัมผัส ควรใช้ Pointer Events แทน (รองรับได้ดีกว่าในปัจจุบัน)

Pointer Events (แนะนำสำหรับโปรเจกต์ใหม่)

element.addEventListener("pointerdown", handleDown);
element.addEventListener("pointermove", handleMove);
element.addEventListener("pointerup", handleUp);

Pointer Events รองรับทั้งเมาส์ สัมผัส และปากกาสไตลัสใน API เดียวกัน