เหตุการณ์ ondblclick: รันสคริปตเมื่อดับเบิลคลิกองค์ประกอบ

เหตุการณ์ ondblclick จะถูกกระตุ้นเมื่อผู้ใช้ดับเบิลคลิก (Double-click) บนองค์ประกอบ HTML เกิดขึ้นหลังจากลำดับ: mousedown → mouseup → click → mousedown → mouseup → click → dblclick

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
    <button ondblclick="display()" style="padding: 10px 20px; font-size: 16px;">
        คลิกสองครั้งที่นี่
    </button>
    <p id="msg" style="margin-top: 10px; color: #666;">รอการดับเบิลคลิก...</p>
    <script>
        function display() {
            alert("คุณดับเบิลคลิกปุ่มแล้ว!");
            document.getElementById('msg').textContent = 'ดับเบิลคลิกล่าสุด: ' + new Date().toLocaleTimeString();
        }
    </script>
</body>
</html>

ความแตกต่าง Click vs Double Click

⚠️ ปัญหา Click + Dblclick พร้อมกัน

หากมีทั้ง onclick และ ondblclick บนองค์ประกอบเดียว ทั้งสองจะยิง (Click ยิง 2 ครั้ง, Dblclick 1 ครั้ง) ต้องใช้ Debounce/Timer แยก:

let clickTimer = null;
const btn = document.getElementById('myBtn');

btn.addEventListener('click', (e) => {
    if (clickTimer) {
        clearTimeout(clickTimer);
        clickTimer = null;
        // Double Click Logic
        handleDoubleClick(e);
    } else {
        clickTimer = setTimeout(() => {
            // Single Click Logic
            handleSingleClick(e);
            clickTimer = null;
        }, 300); // รอ 300ms ดูว่ามี Click ครั้งที่ 2 ไหม
    }
});

btn.addEventListener('dblclick', (e) => {
    e.preventDefault(); // ป้องกัน Default (เช่น Text Selection)
});

การใช้งานทั่วไป

• Inline Editing: ดับเบิลคลิกเพื่อแก้ไขข้อความโดยตรง
• File Manager: ดับเบิลคลิกเปิดไฟล์/โฟลเดอร์
• Text Selection: ดับเบิลคลิกเลือกคำ (Default Browser Behavior)
• Zoom Image: ดับเบิลคลิกซูมเข้า/ออก
• Table Row: ดับเบิลคลิกดูรายละเอียด