web-dev-qa-db-fra.com

Comment arrêter le comportement des clics sur les liens par défaut avec jQuery

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 page différente) 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 jQuery:

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

Quel est le problème?

javascriptjqueryeventsclickjquery-events
79
smartcaveman
e.preventDefault();

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

Annule l'événement s'il est annulable, sans arrêter sa propagation.

129
Artjom Zabelin

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

Ou avoir return false de votre méthode.

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

28
Jonathon Bolster
$('.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.

27
Peeter

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

2
Null Pointer

Ce code supprime 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);
1
Matoeil