So stoppen Sie das Standardverhalten beim Klicken auf Links mit jQuery


88

Ich habe einen Link auf einer Webseite. Wenn ein Benutzer darauf klickt, sollte ein Widget auf der Seite aktualisiert werden. Ich mache jedoch etwas, da die Standardfunktionalität (Navigieren zu einer anderen Seite) vor dem Auslösen des Ereignisses auftritt.

So sieht der Link aus:

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

So sieht die jQuery aus:

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

Was ist das Problem?


Mögliches Duplikat von jQuery deaktiviert einen Link
Benutzer

Antworten:



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

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

Die folgenden Methoden erreichen genau das Gleiche.


Warum muss ich anrufen stopPropagation()und preventDefault()?
Smartcaveman

2
Schauen Sie sich Jonathons Antwort an, er erklärt, was jede Funktion tut. Um sicherzustellen, dass der Klick, den Sie gerade bearbeitet haben, später nicht von jemand anderem bearbeitet wird.
Peeter

30

Sie möchten e.preventDefault()verhindern, dass die Standardfunktionalität auftritt.

Oder haben return falsevon Ihrer Methode.

preventDefaultVerhindert die Standardfunktionalität und stopPropagationverhindert, dass das Ereignis zu Containerelementen sprudelt.


3

Sie können e.preventDefault();anstelle von verwendene.stopPropagation();


1

Dieser Code entfernt alle Ereignis-Listener

var old_element=document.getElementsByClassName(".update-cart");    
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);  
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.