Impedir un enlace para recargar la página

2 minutos de lectura

avatar de usuario
miguel mora

Estoy creando un menú receptivo: Demostración de Codepen

Para evitar que la página se vuelva a cargar cuando hago clic en un enlace, tengo:

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

Pero esto no parece funcionar. Cuando hago clic en un botón, el menú desaparece.

¿Alguien sabe lo que estoy haciendo mal?

avatar de usuario
sergi

No es el elemento que necesita un .preventDefault()es el clic event.

Prueba esto:

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

No recomiendo usar el href como selector, sin embargo, mejor darle un id o name.

De MDN, sobre .preventDefault():

Cancela el evento si es cancelable, sin detener la propagación del evento.

Usted puede leer más aquí:


Hay una forma de CSS, usando puntero-eventos.

Entonces, al usar en el CSS pointer-events: none; todos los clics serán ignorados. Esta es una alternativa “reciente” y compatible con IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+.

Ejemplo

  • Esta es la solución en realidad.

    – Sarvap Praharanayuthan

    02/09/2013 a las 14:43

  • Probé tu sugerencia pero, en mi ejemplo, no funciona. Y me gustaría usarlo solo en los enlaces con href=#” que son los que tienen menú hijo… Prueba a ver mi ejemplo de CodePen…

    – Miguel Mora

    02/09/2013 a las 15:03

  • @Shapper, acabo de comprobar la consola de su bolígrafo. No está cargando jQuery, por eso. Chequea aquí: jsfiddle.net/A8apu

    – sergio

    02/09/2013 a las 15:39

Aquí hay una manera muy fácil de hacerlo dentro de html.

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

Solo devuelve falso.

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

  • También me gusta devolver falso.

    – lharby

    02/09/2013 a las 14:37

  • Probé tu sugerencia pero, en mi ejemplo, no funciona. Prueba a ver mi ejemplo de CodePen…

    – Miguel Mora

    02/09/2013 a las 15:03

  • @Shapper Nunca he usado codepen, pero parece que la biblioteca jquery no se ha incluido. Necesita vincularlo en el código. Se devuelve “$ no está definido”.

    – lharby

    02/09/2013 a las 15:13


Usar así:

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

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

Prueba esto:

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

Ejemplo de código abierto de trabajo: http://codepen.io/anon/pen/cynEg

No tenía una referencia a la biblioteca jquery incluida. Además, la función ‘consultar’ ahora arroja un error, pero preventDefault está funcionando.

Editar He comentado la segunda función.

avatar de usuario
adkl

Y una opción en línea sin jQuery:

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

Y no olvide que con esto ya ha usado el nombre “f” para una función, así que no nombre otras funciones como esta.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad