event.preventDefault();

เวลาเราเขียน event handling บางทีเราก็ต้องการไม่ให้มันทำงานในรูปแบบปรกติบางอย่าง เช่น เรามี link ให้กด แต่เราเพิ่ม onClick ว่าถ้า user click link แล้ว แทนที่จะให้มันวิ่งไปที่ link นั้นๆเลย ก็ให้มันขึ้น alert หรือ dialog box ให้ user confirm ก่อน แล้วค่อยไปตาม link – ทีนี้ถ้า user click cancel หรือยกเลิก เราต้องการให้มันยกเลิก ไม่ไปตาม link นั้น

สิ่งที่จะช่วยเราคือ event.preventDefault();

<a href="https://www.example.com" id="myLink">Go to Example.com</a>

<script>
document.getElementById('myLink').onclick = function(event) {
    var userResponse = prompt("Are you sure you want to go to Example.com? Type 'yes' to proceed.");

    if (userResponse !== 'yes') {
        event.preventDefault(); // Stop the link from navigating
        alert("Navigation cancelled.");
    } else {
        alert("Proceeding to Example.com!");
        // The link will navigate as usual if preventDefault() is not called
    }
};
</script>

อันนี้เราใช้ prompt มันจะหยุดการทำงานของ script จนกว่าเราจะตอบ prompt แล้วค่อยไปต่อ ดังนั้น เราใส่ event.preventDefault(); หลังจาก confirm แล้วก็ได้

แต่ถ้าเราเรียกใช้ library อย่าง SweetAlert2 ถ้าเราไม่สั่ง preventDefault ตั้งแต่ต้น มันจะใช้งานไม่ได้ – ดังนั้น เราต้องทำ event.preventDefault(); ตั้่งแต่ onClick ทำงาน – จากนั้นงานที่จะต้อง reload ไปหน้าอื่นก็ต้องให้ user กำหนดให้ใหม่ (เพราะของเดิมยกเลิกไปแล้ว)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

<a href="https://www.google.com" class="confirm-link">Go to Google</a>
<a href="https://www.facebook.com" class="confirm-link">Go to Facebook</a>
<a href="/some-other-page.html" class="confirm-link">Go to Another Page</a>

<script>
document.querySelectorAll('.confirm-link').forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault(); // Prevent the default navigation immediately

        const targetUrl = this.href; // Get the URL from the href attribute

        Swal.fire({
            title: 'Are you sure?',
            text: `You are about to navigate to ${targetUrl}.`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, proceed!',
            cancelButtonText: 'No, stay here'
        }).then((result) => {
            if (result.isConfirmed) {
                // If confirmed, manually navigate to the URL
                window.location.href = targetUrl;
            } else {
                // User clicked "Cancel" or dismissed the alert
                Swal.fire(
                    'Cancelled',
                    'Your navigation was cancelled.',
                    'info'
                );
            }
        });
    });
});
</script>