Jak zatrzymać domyślne zachowanie związane z klikaniem linków za pomocą jQuery


88

Mam łącze na stronie internetowej. Gdy użytkownik go kliknie, widżet na stronie powinien zostać zaktualizowany. Jednak coś robię, ponieważ domyślna funkcjonalność (przejście do innej strony) występuje przed uruchomieniem zdarzenia.

Tak wygląda link:

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

Oto jak wygląda jQuery:

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

Jaki jest problem?


możliwy duplikat jQuery wyłącza link
użytkownik

Odpowiedzi:



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

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

Następujące metody dają dokładnie to samo.


Dlaczego muszę dzwonić stopPropagation()i preventDefault()?
smartcaveman

2
Spójrz na odpowiedź Jonathona, wyjaśnia, co robi każda funkcja. Ale przede wszystkim, aby upewnić się, że kliknięcie, które właśnie obsłużyłeś, nie jest później obsługiwane przez kogoś innego.
Peeter

30

Chcesz e.preventDefault() zapobiec występowaniu domyślnych funkcji.

Lub masz return falseze swojej metody.

preventDefaultzapobiega domyślnej funkcjonalności i stopPropagationzapobiega przedostawaniu się zdarzenia do elementów kontenera.



1

Ten kod usuwa wszystkie detektory zdarzeń

var old_element=document.getElementsByClassName(".update-cart");    
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);  
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.