Einen Link zum Neuladen der Seite verhindern

Lesezeit: 3 Minuten

Benutzer-Avatar
Miguel Mura

Ich erstelle ein responsives Menü: Codepen-Demo

Um zu vermeiden, dass die Seite neu geladen wird, wenn ich auf einen Link klicke, habe ich:

$('nav.menu a[href="#"]').click(function () {
  $(this).preventDefault();
});

Aber das scheint nicht zu funktionieren. Wenn ich auf eine Schaltfläche klicke, verschwindet das Menü.

Weiß jemand was ich falsch mache?

Benutzer-Avatar
Sergio

Es ist nicht das Element, das a benötigt .preventDefault()es ist das Klicken event.

Versuche dies:

$('nav.menu a').click(function (event) {
  event.preventDefault();
  // or use return false;
});

Ich empfehle nicht, die zu verwenden href als Selektor aber besser, ihm ein zu geben id oder name.

Von MDN über .preventDefault():

Storniert die Veranstaltung wenn es stornierbar ist, ohne die weitere Ausbreitung des Ereignisses zu stoppen.

Hier können Sie mehr lesen:


Es gibt einen CSS-Weg mit Zeigerereignisse.

Also durch die Verwendung im CSS pointer-events: none; Alle Klicks werden ignoriert. Dies ist eine “aktuelle” Alternative und wird in IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+ unterstützt.

Beispiel

  • Das ist eigentlich die Lösung.

    – Sarvap Praharanayuthan

    2. September 2013 um 14:43 Uhr

  • Ich habe Ihren Vorschlag ausprobiert, aber in meinem Beispiel funktioniert es nicht. Und ich möchte es nur in den Links mit href = #” verwenden, die ein untergeordnetes Menü haben … Versuchen Sie, mein CodePen-Beispiel zu überprüfen …

    – Miguel Moura

    2. September 2013 um 15:03 Uhr

  • @Shapper, habe gerade die Konsole auf deinem Stift überprüft. Es lädt jQuery nicht, deshalb. Überprüfe hier: jsfiddle.net/A8apu

    – Sergio

    2. September 2013 um 15:39 Uhr

Hier ist eine sehr einfache Möglichkeit, dies in HTML zu tun.

<a class="font-weight-bold" href="https://stackoverflow.com/questions/18575623/javascript:void(0);"> Click Here </a>

Geben Sie einfach falsch zurück.

$('nav.menu a[href="#"]').click(function () {
  return false
});

  • Ich mag return false auch.

    – lharby

    2. September 2013 um 14:37 Uhr

  • Ich habe Ihren Vorschlag ausprobiert, aber in meinem Beispiel funktioniert es nicht. Versuchen Sie, mein CodePen-Beispiel zu überprüfen …

    – Miguel Moura

    2. September 2013 um 15:03 Uhr

  • @Shapper Ich habe noch nie Codepen verwendet, aber es sieht so aus, als ob die jquery-Bibliothek nicht enthalten war. Sie müssen im Code darauf verlinken. “$ ist nicht definiert” wird zurückgegeben.

    – lharby

    2. September 2013 um 15:13 Uhr


Verwenden Sie so:

$('nav.menu a[href="#"]').click(function (event) {
  event.preventDefault();
});

$('nav.menu a[href="#"]').click(function (e) {
   e.preventDefault();
});

Versuche dies:

$('.menu a').click(function(e){
   e.preventDefault(); // stop the normal href from reloading the page.
});

Beispiel für einen funktionierenden Codepen: http://codepen.io/anon/pen/cynEg

Sie hatten keinen Verweis auf die enthaltene jquery-Bibliothek. Auch die ‘enquire’-Funktion gibt jetzt einen Fehler aus, aber preventDefault funktioniert.

Bearbeiten Die zweite Funktion habe ich auskommentiert.

Benutzer-Avatar
adkl

Und eine Inline-Option ohne jQuery:

<a href="https://stackoverflow.com/questions/18575623/javascript:function%20f(e){e.preventDefault();}">Link</a>

Und vergessen Sie nicht, dass Sie damit bereits den Namen “f” für eine Funktion verwendet haben, also benennen Sie keine andere Funktion so.

1016410cookie-checkEinen Link zum Neuladen der Seite verhindern

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy