Как остановить поведение щелчка по ссылке по умолчанию с помощью jQuery

88

У меня есть ссылка на веб-странице. Когда пользователь щелкает по нему, виджет на странице должен обновиться. Однако я что-то делаю, потому что функциональность по умолчанию (переход на другую страницу) выполняется до срабатывания события.

Вот как выглядит ссылка:

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

Вот как выглядит jQuery:

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

В чем проблема?

умный пещерный человек
источник
возможный дубликат jQuery отключить ссылку
пользователь

Ответы:

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

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

Следующие методы достигают того же самого.

Peeter
источник
Зачем мне звонить stopPropagation()и preventDefault()?
smartcaveman
2
Посмотрите на ответ Джонатона, он объясняет, что делает каждая функция. Но в основном, чтобы убедиться, что щелчок, который вы только что обработали, не обработал кто-то еще.
Peeter
30

Вы хотите, e.preventDefault()чтобы функция по умолчанию не работала.

Или есть return falseпо твоему методу.

preventDefaultпредотвращает функциональность по умолчанию и stopPropagationпредотвращает всплытие события до элементов контейнера.

Джонатон Болстер
источник
3

Вы можете использовать e.preventDefault();вместоe.stopPropagation();

Нулевой указатель
источник
1

Этот код удаляет все прослушиватели событий

var old_element=document.getElementsByClassName(".update-cart");    
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);  
Matoeil
источник