Comment arrêter le comportement de clic de lien par défaut avec jQuery

88

J'ai un lien sur une page Web. Lorsqu'un utilisateur clique dessus, un widget sur la page doit se mettre à jour. Cependant, je fais quelque chose, car la fonctionnalité par défaut (accéder à 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?

smartcaveman
la source
duplication possible de jQuery désactiver un lien
utilisateur

Réponses:

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

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

Les méthodes suivantes réalisent exactement la même chose.

Peeter
la source
Pourquoi dois-je appeler stopPropagation()et preventDefault()?
smartcaveman
2
Regardez la réponse de Jonathons, il explique ce que fait chaque fonction. Mais fondamentalement, pour vous assurer que le clic que vous venez de gérer ne sera pas géré par quelqu'un d'autre plus tard.
Peeter
30

Tu veux e.preventDefault() empêcher la fonctionnalité par défaut de se produire.

Ou avoir return false de votre méthode.

preventDefaultempêche la fonctionnalité par défaut et stopPropagationempêche l'événement de se propager aux éléments de conteneur.

Jonathon Bolster
la source
3

Vous pouvez utiliser à la e.preventDefault();place dee.stopPropagation();

Pointeur nul
la source
1

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);  
Matoeil
la source