Cara Mencegah Aksi Default pada Event di JavaScript

Kadang kita ingin menghentikan aksi bawaan browser, misalnya mencegah form dikirim agar bisa divalidasi dulu, atau mencegah tautan berpindah halaman. Artikel ini membahas cara mencegah aksi default dengan preventDefault di JavaScript.

Metode preventDefault()

<script>
const form = document.getElementById("formku");
form.addEventListener("submit", function(e) {
    e.preventDefault(); // cegah form dikirim & halaman reload
    console.log("Validasi dulu sebelum kirim");
});
</script>

Contoh Kasus: Validasi Form Sebelum Kirim

<script>
form.addEventListener("submit", function(e) {
    const email = document.getElementById("email").value.trim();
    if (email === "") {
        e.preventDefault(); // batalkan kirim
        alert("Email wajib diisi");
    }
});
</script>

Contoh Kasus: Tautan yang Tidak Berpindah

<script>
document.querySelectorAll("a.modal").forEach(link => {
    link.addEventListener("click", function(e) {
        e.preventDefault(); // buka popup, bukan pindah halaman
        bukaModal();
    });
});
</script>

Kesimpulan

Gunakan e.preventDefault() untuk membatalkan aksi bawaan, terutama saat memvalidasi form dengan JavaScript atau membuat tautan yang memicu aksi khusus alih-alih berpindah halaman.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *