preventDefault () en una etiqueta <a>

133

Tengo un poco de HTML y jQuery que se desliza divhacia arriba y hacia abajo para mostrarlo u ocultarlo cuando se hace clic en un enlace:

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

Mi pregunta es: ¿cómo uso preventDefault()para detener el enlace que actúa como un enlace y agrega "#" al final de mi URL y salta a la parte superior de la página?

No puedo encontrar la sintaxis correcta, sigo recibiendo un error que dice

preventDefault () no es una función.

javascript jquery

— Chris J Allen
fuente

194

Intenta algo como:

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

Aquí está la página sobre eso en la documentación de jQuery

— Davide Gualano
fuente

53

Establecer el hrefatributo comohref="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
fuente

Pequeña joya para anclas, ¡gracias! ¿Alguien podría describir por qué esto funciona?

— justinpage

8

El hrefatributo @KLVTZ de la etiqueta de anclaje ( a) puede no estar vacío ... Pero podemos configurarlo como javascript:<code-here>legal / válido. Luego ingresamos <code-here>solo por una declaración vacía agregando un punto y coma. De esta manera el enlace no hace nada.

— Stijn de Witt

1

¡Muchas gracias! Esto me permitió implementar una funcionalidad de botón de retroceso (recordando el estado establecido por pushState () en todas las páginas) en las rutas de navegación de CalePHP como esta $ this-> Html-> addCrumb ('Sesiones', 'javascript: window.history.back (); ');

— Patronauta el

38

Se sugiere que no use return false, ya que 3 cosas ocurren como resultado:

event.preventDefault ();
event.stopPropagation ();
Detiene la ejecución de devolución de llamada y vuelve inmediatamente cuando se llama.

Entonces, en este tipo de situación, en realidad solo debes usar event.preventDefault();

Archivo del artículo - jQuery Events: Stop (Mis) Using Return False

— Ryan
fuente

13

Alternativamente, puede devolver false desde el evento click:

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

Lo que detendría la activación del A-Href.

Sin embargo, tenga en cuenta que, por razones de usabilidad, en un mundo ideal que href aún debería ir a algún lado, para las personas que desean abrir el enlace en una nueva pestaña;)

— Kent Fredric
fuente

1

sí, creo que estaba respondiendo lo que pensé que era tu intención en lugar de la pregunta :)

— Kent Fredric

Por lo que vale, hace muchos años se promocionó que debería devolver -1 para evitar que se active el href. Creo que ya no funciona en NINGÚN navegador, y debe "devolver falso" para evitar que la página salte.

— Randy

12

Esta es una solución que no es JQuery que acabo de probar y funciona.

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

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>

Utilizar

javascript: void (0);

— Hatcha
fuente

@AhmadSharif He probado en FF 40.0.3 e IE 11 hoy, todavía hay trabajo.

— HATCHA

1

Creo que void (0) puede ser feo / confuso para los usuarios, que pueden verlo cuando colocan el enlace. En realidad, puede poner cualquier JS válido, por lo que me gusta poner un comentario que describa lo que hace. por ejemplohref="javascript:// Send Email"

— colllin el

11

Sin embargo, otra manera de hacer esto en Javascript usando inline onclick, IIFE, eventy preventDefault():

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

— A-Sharabiani
fuente

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

— ankabot

6

después de varias operaciones, cuando la página finalmente debe ir al enlace, puede hacer lo siguiente:

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

            window.location = href;
          });

— 1 instinto
fuente

1

¿Por qué hacer preventDefaulty luego hacer la acción predeterminada usted mismo? Simplemente haga lo que necesite agregar y deje que se realice el valor predeterminado.

— nathanvda

5

¿Por qué no simplemente hacerlo en CSS?

Elimina el atributo 'href' en tu etiqueta de anclaje

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

En tu css

  a{
    cursor: pointer;
    }

1

De esta forma perderá el atributo: hover en los navegadores defectuosos (es decir, la familia)

— Strae

4

Si detener la propagación del evento no te molesta, solo usa

return false;

al final de tu manejador. En jQuery evita el comportamiento predeterminado y detiene el burbujeo del evento.

— sebarmeli
fuente

4

Puede hacer uso de return false;la llamada del evento para detener la propagación del evento, actúa como una event.preventDefault();negación. O puede usar el javascript:void(0)atributo href para evaluar la expresión dada y luego regresar undefinedal elemento.

Devolver el evento cuando se llama:

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

Caso nulo:

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

Puede ver más sobre en: ¿Cuál es el efecto de agregar void (0) para href y 'return false' en el escucha de eventos de clic de la etiqueta de anclaje?

— RPichioli
fuente