Cara menghentikan perilaku klik tautan default dengan jQuery


88

Saya memiliki link di halaman web. Saat pengguna mengkliknya, widget di halaman akan diperbarui. Namun, saya melakukan sesuatu, karena fungsionalitas default (menavigasi ke halaman berbeda) terjadi sebelum peristiwa diaktifkan.

Seperti inilah tampilan tautannya:

<a href="store/cart/" class="update-cart">Update Cart</a>

Seperti inilah tampilan jQuery:

$('.update-cart').click(function(e) { 
  e.stopPropagation(); 
  updateCartWidget(); 
});

Apa masalahnya?


kemungkinan duplikat jQuery nonaktifkan tautan
pengguna

Jawaban:



35
$('.update-cart').click(function(e) {
    updateCartWidget();
    e.stopPropagation();
    e.preventDefault();
});

$('.update-cart').click(function() {
    updateCartWidget();
    return false;
});

Metode berikut mencapai hal yang persis sama.


Mengapa saya perlu menelepon stopPropagation()dan preventDefault()?
smartcaveman

2
Lihatlah jawaban Jonathons, dia menjelaskan apa yang dilakukan masing-masing fungsi. Namun pada dasarnya, untuk memastikan klik yang baru saja Anda tangani tidak akan ditangani oleh orang lain nanti.
Peeter

30

Anda ingin e.preventDefault()mencegah fungsionalitas default terjadi.

Atau dapatkan return falsedari metode Anda.

preventDefaultmencegah fungsionalitas default dan stopPropagationmencegah acara menggelembung ke elemen kontainer.


3

Anda dapat menggunakan e.preventDefault();sebagai penggantie.stopPropagation();


1

Kode ini menghapus semua event listener

var old_element=document.getElementsByClassName(".update-cart");    
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);  
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.