Como parar o comportamento de clique em link padrão com jQuery

88

Eu tenho um link em uma página da web. Quando um usuário clica nele, um widget na página deve ser atualizado. No entanto, estou fazendo algo, porque a funcionalidade padrão (navegar para uma página diferente) ocorre antes do evento ser disparado.

Esta é a aparência do link:

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

Esta é a aparência do jQuery:

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

Qual é o problema?

smartcaveman
fonte
possível duplicata de jQuery desativar um link
usuário

Respostas:

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

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

Os métodos a seguir alcançam exatamente a mesma coisa.

Peeter
fonte
Por que eu preciso ligar stopPropagation()e preventDefault()?
smartcaveman
2
Veja a resposta de Jonathons, ele explica o que cada função faz. Mas basicamente, para garantir que o clique que você acabou de manipular não seja manipulado por outra pessoa mais tarde.
Peeter
30

Você quer e.preventDefault() evitar que a funcionalidade padrão ocorra.

Ou tenha return falsede seu método.

preventDefaultimpede a funcionalidade padrão e stopPropagationevita que o evento borbulhe nos elementos do contêiner.

Jonathon Bolster
fonte
3

Você pode usar em e.preventDefault();vez dee.stopPropagation();

Ponteiro nulo
fonte
1

Este código remove todos os ouvintes de eventos

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