preventDefault () su un tag <a>

133

Ho un po 'di HTML e jQuery che scorre divsu e giù per mostrarlo o nasconderlo quando si fa clic su un collegamento:

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

La mia domanda è: come posso fare preventDefault()per evitare che il collegamento funga da collegamento e aggiunga "#" alla fine del mio URL e salti all'inizio della pagina?

Non riesco a capire la sintassi giusta, continuo a ricevere un errore dicendo

preventDefault () non è una funzione.

javascript jquery

— Chris J Allen
fonte

194

Prova qualcosa del tipo:

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

Ecco la pagina a riguardo nella documentazione di jQuery

— Davide Gualano
fonte

53

Impostare l' hrefattributo comehref="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
fonte

Bel gioiellino per le ancore - grazie! Qualcuno potrebbe descrivere perché questo funziona?

— justinpage

8

L' hrefattributo @KLVTZ del tag anchor ( a) potrebbe non essere vuoto ... Ma possiamo impostarlo su javascript:<code-here>, che è legale / valido. Inseriamo quindi <code-here>solo un'istruzione vuota aggiungendo un punto e virgola. In questo modo il collegamento non fa nulla.

— Stijn de Witt,

1

Molte grazie! Questo mi ha permesso di implementare una funzionalità del pulsante Indietro (ricordando lo stato impostato da pushState () attraverso le pagine) nelle briciole di pane di CalePHP come questa $ this-> Html-> addCrumb ('Sessioni', 'javascript: window.history.back (); ');

— Patronauta

38

Si suggerisce di non utilizzare return false, poiché di conseguenza si verificano 3 cose:

event.preventDefault ();
event.stopPropagation ();
Interrompe l'esecuzione della richiamata e ritorna immediatamente quando viene chiamato.

Quindi, in questo tipo di situazione, dovresti solo usarlo event.preventDefault();

Archivio dell'articolo - Eventi jQuery: Stop (Mis) Utilizzo di Return False

— Ryan
fonte

13

In alternativa, potresti semplicemente restituire false dall'evento click:

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

Il che impedirebbe l'attivazione di A-Href.

Nota comunque, per motivi di usabilità, in un mondo ideale che href dovrebbe ancora andare da qualche parte, per le persone che vogliono aprire il link in una nuova scheda;)

— Kent Fredric
fonte

1

sì, penso di rispondere a quello che pensavo fosse il tuo intento invece della domanda :)

— Kent Fredric,

Per quello che vale, molti anni fa è stato propagandato che si dovrebbe restituire -1 per evitare che l'href venga attivato. Non penso che funzioni più in QUALSIASI browser e devi "restituire false" per evitare il salto della pagina.

— Randy,

12

Questa è una soluzione non JQuery che ho appena testato e funziona.

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

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>

Uso

javascript: void (0);

— Hatcha
fonte

@AhmadSharif Ho testato su FF 40.0.3 e IE 11 oggi, ci sono ancora lavori.

— HATCHA,

1

Penso che void (0) possa essere brutto / confuso per gli utenti, che possono vederlo quando passano il mouse sopra il link. Puoi effettivamente inserire qualsiasi JS valido, quindi mi piace inserire un commento che descriva ciò che fa. es.href="javascript:// Send Email"

— colllin

11

Un altro modo di fare questo in Javascript utilizzando inline onclick, IIFE, evente preventDefault():

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

— A-Sharabiani
fonte

Ciao, o semplicemente<a href='#' onclick="event.preventDefault()">Click Me</a>

— ankabot il

6

dopo diverse operazioni, quando la pagina dovrebbe finalmente andare al collegamento è possibile effettuare le seguenti operazioni:

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

            window.location = href;
          });

— 1nstinct
fonte

1

Perché farlo preventDefaulte quindi eseguire l'azione predefinita da soli? Fai solo quello che devi aggiungere e lascia che l'impostazione predefinita abbia ancora luogo.

— nathanvda,

5

Perché non farlo semplicemente in CSS?

Elimina l'attributo 'href' nel tuo tag di ancoraggio

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

Nel tuo css,

  a{
    cursor: pointer;
    }

1

In questo modo perderà l'attributo: hover nei browser danneggiati (cioè famiglia)

— Strae

4

Se interrompere la propagazione dell'evento non ti disturba, basta usare

return false;

alla fine del gestore. In jQuery impedisce il comportamento predefinito e blocca il gorgoglio degli eventi.

— sebarmeli
fonte

4

È possibile utilizzare return false;dalla chiamata all'evento per interrompere la propagazione dell'evento, si comporta come una event.preventDefault();negazione. Oppure puoi usare l' javascript:void(0)attributo href per valutare l'espressione data e poi tornare undefinedall'elemento.

Restituzione dell'evento quando viene chiamato:

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

Caso vuoto:

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

Puoi vedere di più in: Qual è l'effetto dell'aggiunta di void (0) per href e 'return false' sul listener di eventi click del tag anchor?

— RPichioli
fonte