preventDefault() vs return false trong JavaScript

So sánh nhanh

Chi tiết

event.preventDefault()

• Chỉ ngăn hành vi mặc định của browser (link navigation, form submit, checkbox toggle...)
• Không ngăn event bubbling
• Code tiếp tục chạy sau dòng này
• Chuẩn W3C, hoạt động với addEventListener

return false

• Chỉ hoạt động trong traditional event handlers (onclick="return false" hoặc element.onclick = fn)
• Tương đương: event.preventDefault() + event.stopPropagation()
• Dừng ngay lập tức function execution
• KHÔNG hoạt động với addEventListener

Ví dụ so sánh

<!DOCTYPE html>
<html lang="vi">
<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', sans-serif; padding: 20px; }
        .result { font-size: 16px; font-weight: 500; margin: 15px 0; padding: 15px; border-radius: 4px; white-space: pre-wrap; }
        .r1 { color: #1976d2; background: #e3f2fd; }
        .r2 { color: #d32f2f; background: #ffebee; }
        a { display: inline-block; margin: 10px 0; padding: 10px 20px; background: #1976d2; color: white; text-decoration: none; border-radius: 4px; }
        input[type="checkbox"] { transform: scale(1.3); margin: 10px; }
    </style>
</head>
<body>
    <h1>preventDefault() vs return false</h1>
    
    <h3>1. Link với preventDefault() (addEventListener)</h3>
    <a href="https://google.com" id="link">Google (preventDefault)</a>
    <div class="result r1" id="result1"></div>
    
    <h3>2. Checkbox với return false (inline handler)</h3>
    <input type="checkbox" id="check" onclick="return checkedOrNot(false)"> Thử tick vào đây
    <div class="result r2" id="result2"></div>

    <script>
        const res1 = document.getElementById('result1');
        const res2 = document.getElementById('result2');
        const linkEle = document.getElementById('link');
        const checkEle = document.getElementById('check');

        // preventDefault với addEventListener
        linkEle.addEventListener('click', (event) => {
            res1.textContent = '🔗 preventDefault() đã ngăn chặn chuyển trang đến Google';
            event.preventDefault(); // Chỉ ngăn navigation
        });

        // return false với inline handler
        function checkedOrNot(val) {
            if (val === true) {
                checkEle.checked = true;
            } else {
                res2.textContent = '☑️ return false đã ngăn checkbox được tick';
                return false; // Ngăn default + stop propagation + return ngay
            }
        }
    </script>
</body>
</html>

Kết quả

• Click link Google: Không chuyển trang, hiển thị thông báo
• Click checkbox: Không tick được, hiển thị thông báo

Best Practice hiện đại

// ✅ KHUYẾN NGHỊ: Dùng addEventListener + preventDefault/stopPropagation
element.addEventListener('click', (e) => {
    e.preventDefault();     // Ngăn default behavior
    e.stopPropagation();    // Ngăn bubbling (nếu cần)
    // logic của bạn...
});

// ❌ TRÁNH: Inline handler + return false
// <button onclick="return false">

// ❌ TRÁNH: return false trong addEventListener (không tác dụng)
element.addEventListener('click', (e) => {
    return false; // VÔ NGHĨA!
});

Tóm tắt

• Luôn dùng addEventListener + preventDefault()/stopPropagation()
• Chỉ dùng return false trong code legacy (inline handlers)
• Tách biệt rõ ràng: ngăn default vs ngăn bubbling vs dừng function