Heim >Web-Frontend >js-Tutorial >Wie kann ich das Scrollen einer Seite beim Klicken auf einen Link mit JavaScript verhindern?

Wie kann ich das Scrollen einer Seite beim Klicken auf einen Link mit JavaScript verhindern?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-26 22:03:29512Durchsuche

How to Prevent Page Scroll on Link Click with JavaScript?

Verhindern des Seitenscrollens beim Klicken auf einen Link mit JavaScript

Bei der Verwendung von JavaScript oder jQuery zur Verbesserung des Linkverhaltens tritt beim Klicken häufig ein Problem auf Ein Link löst aus, dass die Seite nach oben scrollt. Wenn Sie dieses Verhalten verhindern möchten, haben Sie mehrere Möglichkeiten.

Erwägen Sie zunächst die Methode event.preventDefault(). Indem Sie diese Methode für das an Ihren Handler übergebene Ereignisobjekt aufrufen, deaktivieren Sie effektiv die Standardaktion (z. B. das Navigieren zum Linkziel). Dies funktioniert unabhängig davon, ob Sie $e.preventDefault() von jQuery oder das native Event.preventDefault() im DOM verwenden.

Zum Beispiel verhindert der folgende jQuery-Code das Scrollen:

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

Anderer Option besteht darin, jQuerys return false zu nutzen; Verhalten. Durch die Rückgabe von „false“ von einem Event-Handler werden sowohl event.stopPropagation() als auch event.preventDefault() automatisch aufgerufen. Daher können Sie den folgenden Ansatz verwenden:

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

Wenn Sie außerdem rohe DOM-Ereignisse bevorzugen, verhindert die Rückgabe von „false“ in modernen Browsern das standardmäßige Linkverhalten. Für maximale Kompatibilität mit älteren Browsern wird jedoch der explizite Aufruf von .preventDefault() empfohlen, da die HTML5-Spezifikation dieses Verhalten ursprünglich nicht vorsah.

Das obige ist der detaillierte Inhalt vonWie kann ich das Scrollen einer Seite beim Klicken auf einen Link mit JavaScript verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn