Eliminar el comportamiento por defecto de todos los enlaces de una web

Eliminar el comportamiento por defecto de todos los enlaces de una web

Print Friendly, PDF & Email
Valora esta entrada

En un ejercicio previo hemos visto como modificar el destino de todos los enlaces de un documento web.

Lo encontraréis en este enlace.

En este ejercicio resolvemos como eliminar el comportamiento por defecto de todos los enlaces. Y como devolverles de nuevo su comportamiento normal.

Valga decir que este ejercicio sería muy sencillo con jquery pero lo hacemos con javascript puro por fines puramente didácticos.

Entre los conceptos clave más importantes que usaremos:

  • Llamar a todos los nodos de tipo enlace de un documento web al cargar la página.
  • Uso de preventDefault
  • Uso de addEventListener() y removeEventListener().

Vayamos al ejercicio:

Enunciado

Dado el siguiente html añade el código JS necesario para cumplir 2 objetivos:

  • Al cargarse el documento ningún enlace del documento es hábil. Ninguna responde a su comportamiento por defecto.
  • Cuando se haga click en el botón activar comportamiento todos los enlaces volverán a funcionar con normalidad.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Anular enlaces">
        <meta name="author" content="Francesc Ricart">
        <title>Ejercicio js - anular comportamiento por defecto de todos los enlaces de un documento web</title>
        
    </head>
    <body>
        
    <ul>
        <li><a href="https://francescricart.com/tutorial-html" target="_blank">Tutorial HTML</a></li>
        <li><a href="https://francescricart.com/tutorial-css" target="_blank">Tutorial CSS</a></li>
        <li><a href="https://francescricart.com/tutorial-javacript" target="_blank">Tutorial JS</a></li>
        <li><a href="https://francescricart.com/tutorial-wordpress" target="_blank">Tutorial WordPress</a></li>
        <li><a href="https://francescricart.com/contacto" target="_blank">Contacto</a></li>
    </ul>
    
    <button id="reset">Activar comportamiento</button>
    
    <script>
//aquí el código JS resolución del ejercicio
    </script>

    </body>
</html>

Solución del ejercicio

Solucionamos el ejercicio asignando una función de nombre evitarComportamiento a todos los enlaces del documento web.

Esta función se ejecuta siempre que un enlace recibe un click. Captura el tipo de evento que haya recibido y lo previene (leer esta entrada).

Al botón activar comportamiento se le asigna un evento click que llama a un removeEventListener() y que elimina exactamente la función evitarComportamiento en todos los enlaces.

Veámoslo en el código:

¿Como queda el código JS?

window.onload = init;
        
        function init(){
            var enlaces = document.getElementsByTagName("a");
            var boton = document.getElementById("reset");
            
            for(i=0;i<enlaces.length;i++){
                enlaces[i].addEventListener("click",evitarComportamiento);
        }
            boton.addEventListener("click",function(){
           for(i=0;i<enlaces.length;i++){
                enlaces[i].removeEventListener("click",evitarComportamiento);
        }
            });
        }            
        
        function evitarComportamiento(e){
            comportamiento = window.event || e;
            comportamiento.preventDefault();
        }

Si juntamos todas las piezas resolvemos el ejercicio.

¡Hola!

Querido lector,

Puedes encontrar todo el código junto en este enlace.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.