verhindereDefault () auf einem <a> -Tag

133

Ich habe HTML und jQuery, die ein divAuf und Ab verschieben, um es anzuzeigen oder auszublenden, wenn auf einen Link geklickt wird:

<ul class="product-info">
  <li>
    <a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
}

Meine Frage lautet: Wie kann ich verhindern preventDefault(), dass der Link als Link fungiert und am Ende meiner URL "#" hinzufügt und an den Anfang der Seite springt?

Ich kann die richtige Syntax nicht herausfinden, ich bekomme immer wieder eine Fehlermeldung

PreventDefault () ist keine Funktion.

javascript jquery Chris J Allen
quelle

Antworten:

194

Versuchen Sie etwas wie:

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

Hier ist die Seite dazu in der jQuery-Dokumentation

Davide Gualano
quelle
52

Legen Sie das hrefAttribut als festhref="javascript:;" 

<ul class="product-info">
  <li>
   <a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
  <div class="toggle">
    <p>CONTENT TO SHOW/HIDE</p>
  </div>
 </li>
</ul>
Musaddiq Khan
quelle
Schönes kleines Juwel für Anker - danke! Könnte jemand beschreiben, warum das funktioniert?
justinpage
8
Das @ KLVTZ- hrefAttribut von anchor tag ( a) darf nicht leer sein ... Aber wir können es auf setzen javascript:<code-here>, das ist legal / gültig. Wir geben dann <code-here>nur eine leere Anweisung ein, indem wir ein Semikolon hinzufügen. Auf diese Weise macht der Link nichts.
Stijn de Witt
1
Vielen Dank! Dadurch konnte ich eine Back-Button-Funktion (unter Berücksichtigung des durch pushState () auf verschiedenen Seiten festgelegten Status) in CalePHPs Breadcrumbs wie folgt implementieren: $ this-> Html-> addCrumb ('Sessions', 'javascript: window.history.back (); ');
Patronaut
38

Es wird empfohlen, dass Sie nicht verwenden return false, da 3 Dinge als Ergebnis auftreten:

  1. event.preventDefault ();
  2. event.stopPropagation ();
  3. Stoppt die Rückrufausführung und kehrt beim Aufruf sofort zurück.

In solchen Situationen sollten Sie also wirklich nur verwenden event.preventDefault();

Archiv des Artikels - jQuery-Ereignisse: Stop (Mis) Using Return False

Ryan
quelle
13

Alternativ können Sie vom Klickereignis auch einfach false zurückgeben: 

 $('div.toggle').hide();
 $('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
+ return false; 
 });

Das würde verhindern, dass der A-Href ausgelöst wird.

Beachten Sie jedoch aus Gründen der Benutzerfreundlichkeit in einer idealen Welt, dass href immer noch irgendwohin gehen sollte, für die Leute, die einen Link in einem neuen Tab öffnen möchten;)

Kent Fredric
quelle
1
Ja, ich glaube, ich habe geantwortet, was ich dachte, Ihre Absicht war anstelle der Frage :)
Kent Fredric
Vor vielen Jahren wurde angepriesen, dass Sie -1 zurückgeben sollten, um zu verhindern, dass die href ausgelöst wird. Ich denke nicht, dass das in irgendwelchen Browsern mehr funktioniert, und Sie müssen "false" zurückgeben, um das Springen der Seite zu verhindern.
Randy
12

Dies ist eine Nicht-JQuery-Lösung, die ich gerade getestet habe und die funktioniert. 

<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
    var links= document.getElementsByTagName("a");
    for (var i=0;i<links.length;i++){
        links[i].addEventListener("click",function(e){
        alert("NOPE!, I won't take you there haha");
        //prevent event action
        e.preventDefault();
        })
    }
}); 

</script>
</head>
<body>
<div>
<ul>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.facebook.com">Facebook</a></li>
    <p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>
Jefrey Bulla
quelle
12 
<ul class="product-info">
  <li>
    <a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
      <div class="toggle">
        <p>CONTENT TO SHOW/HIDE</p>
      </div>
  </li>
</ul>

Verwenden

Javascript: void (0);

HATCHA
quelle
@AhmadSharif Ich habe heute auf FF 40.0.3 und IE 11 getestet, es gibt noch Arbeit.
HATCHA
1
Ich denke, void (0) kann für Benutzer hässlich / verwirrend sein, die es sehen können, wenn sie den Mauszeiger über den Link bewegen. Sie können tatsächlich jedes gültige JS einfügen, daher möchte ich einen Kommentar einfügen, der beschreibt, was es tut. zBhref="javascript:// Send Email"
Colllin
11

Ein weiterer Weg , dies in Javascript zu tun mit inline onclick, IIFE, eventund preventDefault():

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>
A-Sharabiani
quelle
Hallo oder einfach<a href='#' onclick="event.preventDefault()">Click Me</a>
Ankabot
6

Nach mehreren Vorgängen können Sie Folgendes tun, wenn die Seite endgültig verlinkt werden soll:

          jQuery("a").click(function(e){
            var self = jQuery(this);
            var href = self.attr('href');
            e.preventDefault();
            // needed operations

            window.location = href;
          });
1nstinct
quelle
1
Warum preventDefaultund dann die Standardaktion selbst ausführen? Tun Sie einfach, was Sie hinzufügen müssen, und lassen Sie die Standardeinstellung weiterhin bestehen.
Nathanvda
5

Warum nicht einfach in CSS?

Entfernen Sie das Attribut 'href' in Ihrem Ankertag

<ul class="product-info">
  <li>
    <a>YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

In Ihrem CSS,

  a{
    cursor: pointer;
    }

quelle
1
Auf diese Weise wird das Attribut:
hover
4

Wenn Sie das Stoppen der Weitergabe des Ereignisses nicht stört, verwenden Sie einfach 

return false;

am Ende Ihres Handlers. In jQuery wird das Standardverhalten verhindert und das Sprudeln des Ereignisses gestoppt.

sebarmeli
quelle
4

Sie können return false;den Ereignisaufruf verwenden, um die Ereignisausbreitung zu stoppen. Er verhält sich wie ein event.preventDefault();Negieren. Oder Sie können das javascript:void(0)Attribut href verwenden, um den angegebenen Ausdruck auszuwerten und dann undefinedzum Element zurückzukehren.

Rückgabe des Ereignisses beim Aufruf:

<a href="" onclick="return false;"> ... </a>

Leerer Fall:

<a href="javascript:void(0);"> ... </a>

Weitere Informationen finden Sie unter: Wie wirkt sich das Hinzufügen von void (0) für href und 'return false' auf den Listener für Klickereignisse des Ankertags aus?

RPichioli
quelle