Cómo detener el comportamiento de clic de enlace predeterminado con jQuery


88

Tengo un enlace en una página web. Cuando un usuario hace clic en él, se debe actualizar un widget en la página. Sin embargo, estoy haciendo algo, porque la funcionalidad predeterminada (navegar a una página diferente) ocurre antes de que se active el evento.

Así es como se ve el enlace:

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

Así es como se ve jQuery:

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

¿Cuál es el problema?


posible duplicado de jQuery deshabilitar un enlace
usuario

Respuestas:



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

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

Los siguientes métodos logran exactamente lo mismo.


¿Por qué necesito llamar stopPropagation()y preventDefault()?
smartcaveman

2
Mira la respuesta de Jonathon, él explica qué hace cada función. Pero básicamente, para asegurarse de que el clic que acaba de manejar no sea manejado por otra persona más tarde.
Peeter

30

Quiere e.preventDefault()evitar que se produzca la funcionalidad predeterminada.

O tener return falsede tu método.

preventDefaultevita la funcionalidad predeterminada y stopPropagationevita que el evento se propague a los elementos del contenedor.



1

Este código elimina todos los oyentes de eventos

var old_element=document.getElementsByClassName(".update-cart");    
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);  
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.