Comment stopper le comportement de clic par défaut d'un lien avec jQuery

Question

J'ai un lien sur une page web. Lorsqu'un utilisateur clique dessus, un widget de la page doit être mis à jour. Cependant, je fais quelque chose, car la fonctionnalité par défaut (navigation vers une autre page) se produit avant le déclenchement de l'événement.

Voici à quoi ressemble le lien :

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

Voici à quoi ressemble le jQuery :

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

Quel est le problème ?

Answer 1

e.preventDefault();

de https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

Annule l'événement s'il est annulable, sans arrêter la propagation ultérieure de l'événement.

Answer 2

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

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

Les méthodes suivantes permettent d'obtenir exactement la même chose.

Answer 3

Vous voulez e.preventDefault() pour empêcher la fonctionnalité par défaut de se produire.

Ou bien return false de votre méthode.

preventDefault empêche la fonctionnalité par défaut et stopPropagation empêche l'événement de remonter jusqu'aux éléments du conteneur.

Answer 4

Vous pouvez utiliser e.preventDefault(); au lieu de e.stopPropagation();

Answer 5

Ce code dépouille tous les écouteurs d'événements

var old_element=document.getElementsByClassName(".update-cart");    
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);