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).

