preventDefault() vs return false ใน JavaScript - ความแตกต่างและเมื่อไหร่ใช้

ทั้ง preventDefault() และ return false ใช้หยุดพฤติกรรมเริ่มต้นของเบราว์เซอร์ (Default Behavior) แต่ทำงานต่างกันในรายละเอียด

ความแตกต่างหลัก

ตัวอย่างเปรียบเทียบ

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>preventDefault vs return false</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        .result { font-size: 18px; font-weight: 500; color: blueviolet; margin: 10px 0; padding: 10px; background: #f8f9fa; }
        a { font-size: 18px; }
        input { margin: 10px 0; }
    </style>
</head>
<body>
    <h1>preventDefault() vs return false</h1>
    
    <h3>1. Link: preventDefault() หยุดการนำทาง</h3>
    <a href="https://www.google.com" class="link">ไป Google (preventDefault)</a>
    <div class="result" id="result1"></div>
    
    <h3>2. Checkbox: return false หยุดการติ๊ก</h3>
    <input type="checkbox" class="check" onclick="return checkedOrNot(false)"> ลองติ๊กดู (return false)
    <div class="result" id="result2"></div>
    
    <h3>3. Link: return false ใน Inline Handler</h3>
    <a href="https://www.google.com" onclick="return false">ไป Google (return false inline)</a>
    <div class="result" id="result3"></div>

    <script>
        // 1. preventDefault() ใน addEventListener
        document.querySelector(".link").addEventListener("click", (e) => {
            document.getElementById("result1").innerHTML = 
                "🛑 preventDefault() หยุดการนำทางไป Google แล้ว
" +
                "🔄 Event ยัง Bubble ขึ้นไป (ถ้ามี Parent Listener)";
            e.preventDefault();
        });
        
        // 2. return false ใน Inline Handler (onclick="return ...")
        function checkedOrNot(val) {
            if (val === true) {
                return true; // อนุญาตติ๊ก
            } else {
                document.getElementById("result2").innerHTML = 
                    "🛑 return false หยุดการติ๊ก Checkbox แล้ว
" +
                    "🔄 และหยุด Event Propagation ด้วย";
                return false; // หยุด Default + Propagation
            }
        }
        
        // 3. แสดงว่า return false ใน addEventListener ไม่ทำงาน
        document.querySelectorAll("a")[1].addEventListener("click", (e) => {
            document.getElementById("result3").innerHTML = 
                "⚠️ return false ใน addEventListener ไม่หยุด Default Behavior!
" +
                "✅ ต้องใช้ e.preventDefault() แทน";
            return false; // ไม่มีผลใน addEventListener
        });
    </script>
</body>
</html>

ผลลัพธ์

• Link 1 (preventDefault): กดแล้วไม่ไป Google, Event Bubble ปกติ
• Checkbox (return false inline): กดแล้วไม่ติ๊ก, Event ไม่ Bubble
• Link 2 (return false ใน addEventListener): กดแล้ว ไป Google ได้ปกติ เพราะ return false ไม่ทำงานใน addEventListener

แนวทางปฏิบัติที่แนะนำ (Best Practice)

✅ ใช้ preventDefault() + stopPropagation() ใน addEventListener

element.addEventListener("click", (e) => {
    e.preventDefault();     // หยุด Default Behavior
    e.stopPropagation();    // หยุด Event Bubbling (ถ้าต้องการ)
    // โค้ดอื่นๆ ทำงานต่อได้ปกติ
});

✅ ใช้ return false เฉพาะ Inline Handlers หรือ jQuery

<button onclick="return handleClick()">กดฉัน</button>

function handleClick() {
    // logic...
    return false; // หยุด Default + Propagation
}

// jQuery (เดิม)
$("a").click(function() {
    return false; // เทียบเท่า e.preventDefault() + e.stopPropagation()
});

❌ หลีกเลี่ยง: return false ใน addEventListener

// ❌ ผิด - ไม่ทำงาน
element.addEventListener("click", () => {
    return false; // ไม่มีผลอะไรเลย!
});

// ✅ ถูก
element.addEventListener("click", (e) => {
    e.preventDefault();
    e.stopPropagation();
});

สรุป

• ใช้ preventDefault() สำหรับหยุด Default Behavior (Link, Form Submit, etc.)
• ใช้ stopPropagation() สำหรับหยุด Event Bubbling
• ใช้ return false เฉพาะ Inline Handler (onclick="return false") หรือ jQuery
• ใน Modern JavaScript (addEventListener) ควรแยก preventDefault() และ stopPropagation() ชัดเจน