PreventDefault () w tagu <a>

134

Mam trochę HTML i jQuery, które przesuwają się w divgórę iw dół, aby pokazać lub ukryć to po kliknięciu linku:

<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);
}

Moje pytanie brzmi: jak preventDefault()zatrzymać działanie łącza jako łącza i dodać znak „#” na końcu mojego adresu URL i przeskoczyć na górę strony?

Nie mogę znaleźć właściwej składni, po prostu pojawia się komunikat o błędzie

PreventDefault () nie jest funkcją.

javascript jquery

— Chris J Allen
źródło

194

Spróbuj czegoś takiego:

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

Oto strona o tym w dokumentacji jQuery

— Davide Gualano
źródło

54

Ustaw hrefatrybut jakohref="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
źródło

Niezły mały klejnot dla kotwic - dzięki! Czy ktoś mógłby opisać, dlaczego to działa?

— justinpage

8

hrefAtrybut @KLVTZ tagu kotwicy ( a) może nie być pusty ... Ale możemy go ustawić na javascript:<code-here>, to jest legalne / ważne. Następnie wprowadzamy <code-here>tylko pustą instrukcję, dodając średnik. W ten sposób link nic nie robi.

— Stijn de Witt

1

Wielkie dzięki! Pozwoliło mi to zaimplementować funkcję przycisku Wstecz (zapamiętując stan ustawiony przez pushState () na różnych stronach) do menu nawigacyjnego CalePHP, takiego jak to $ this-> Html-> addCrumb ('Sessions', 'javascript: window.history.back (); ');

— Patronaut

38

Sugeruje się, aby nie używać return false, ponieważ w rezultacie występują 3 rzeczy:

event.preventDefault ();
event.stopPropagation ();
Zatrzymuje wykonywanie wywołania zwrotnego i wraca natychmiast po wywołaniu.

Więc w tego typu sytuacjach powinieneś używać tylko event.preventDefault();

Archiwum artykułu - jQuery Events: Stop (Mis) Using Return False

— Ryan
źródło

13

Alternatywnie możesz po prostu zwrócić wartość false ze zdarzenia kliknięcia:

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

Co powstrzymałoby uruchomienie A-Href.

Uwaga jednak ze względów użyteczności w idealnym świecie ten href powinien gdzieś iść, dla osób, które chcą otworzyć link w nowej zakładce;)

— Kent Fredric
źródło

1

tak, myślę, że odpowiadałem na to, co myślałem, że twój zamiar był zamiast pytania :)

— Kent Fredric

1

Bez względu na to, ile jest to warte, wiele lat temu reklamowano, że należy zwrócić -1, aby zapobiec uruchomieniu href. Nie sądzę, żeby to działało już w ŻADNEJ przeglądarce i musisz „zwrócić fałsz”, aby zapobiec przeskakiwaniu strony.

— Randy,

12

To jest rozwiązanie inne niż JQuery, które właśnie przetestowałem i działa.

<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
źródło

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>

Posługiwać się

javascript: void (0);

— HATCHA
źródło

@AhmadSharif Testowałem dzisiaj na FF 40.0.3 i IE 11, nadal działają.

— HATCHA

1

Myślę, że void (0) może być brzydki / dezorientujący dla użytkowników, którzy widzą to po najechaniu na link. Możesz właściwie umieścić dowolny poprawny JS, więc chciałbym zamieścić komentarz opisujący, co robi. np.href="javascript:// Send Email"

— colllin

11

Jeszcze inny sposób to zrobić w JavaScript za pomocą inline onclick, IIFE, eventi preventDefault():

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>

— A-Sharabiani
źródło

1

Cześć, lub po prostu<a href='#' onclick="event.preventDefault()">Click Me</a>

— ankabot

6

po kilku operacjach, gdy strona powinna wreszcie przejść do linku, możesz wykonać następujące czynności:

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

            window.location = href;
          });

— 1nstinct
źródło

1

Dlaczego to zrobić preventDefault, a następnie samodzielnie wykonać domyślne działanie? Po prostu zrób to, co musisz dodać, i pozwól, aby ustawienie domyślne nadal miało miejsce.

— nathanvda

5

Dlaczego nie zrobić tego po prostu w CSS?

Usuń atrybut „href” z tagu kotwicy

<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>

W twoim css,

  a{
    cursor: pointer;
    }

1

W ten sposób utraci atrybut: hover w złych przeglądarkach (np. W rodzinie)

— Strae

4

Jeśli zatrzymanie propagacji zdarzenia Ci nie przeszkadza, po prostu użyj

return false;

na końcu twojego handlera. W jQuery zapobiega domyślnemu zachowaniu i zatrzymuje propagowanie zdarzeń.

— sebarmeli
źródło

4

Możesz skorzystać return false;z wywołania zdarzenia, aby zatrzymać propagację zdarzenia, działa to jak jego event.preventDefault();negacja. Lub możesz użyć javascript:void(0)atrybutu href, aby ocenić dane wyrażenie, a następnie zwrócićundefined do elementu.

Zwracanie wydarzenia, gdy zostanie wywołane:

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

Pusta sprawa:

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

Więcej informacji na ten temat można znaleźć w artykule: Jaki jest efekt dodania void (0) dla href i „return false” w detektorze zdarzenia kliknięcia tagu kotwicy?

— RPichioli
źródło