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
Eliminar el comportamiento por defecto de todos los enlaces de una web
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!

Entradas relacionadas:

Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 214
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
La apasionante historia del Javascript (resumida)
- 763
Javascript es un lenguaje de programación de lado cliente que ha cambiado Internet tal y como lo conocemos a día de hoy. Junto con el html y el css es uno de los 3 pilares del diseño web. Es un requer...
Ejercicio – Programación de una ventana infinita cansina en JS
- 204
Ejercicio que pregunta iterativamente el color del caballo blanco de santiago hasta que se resuelve. Incluye solución.
Onresize window para calcular el width y el height disponibles
- 512
Explicamos como podemos obtener el ancho y la altura real disponibles de la ventana del navegador mediante Javascript puro y con jQuery
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 571
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Ejercicio – Vamos a dormir, hay 100 ovejas que contar
- 170
Ejercicio javascript dónde se practica el uso de for y de while para la resolución de un mismo problema JS. Incluye solución.
El Document object model (DOM) de Javascript
- 517
El DOM es un tipo especial de objeto que esquematiza las relaciones y interacciones entre los nodos de un documento web y que es creado por el navegador cada vez que interpreta una página web. Cada et...
Acceder y modificar una web con javascript
- 762
Vamos a ver como mediante Javascript podemos interactuar con las etiquetas html que constituyen un documento web. Podemos acceder a una etiqueta, un párrafo, un enlace, una imagen, o incluso a los met...
Métodos imprescindibles para trabajar con fechas en Javascript
- 327
Compendio de métodos para trabajar con fechas en Javascript. Comparto mi chuleta de métodos para obtener y crear nuevas fechas.
Como hacer una lista de la compra con Javascript
- 163
Ejercicio lista de la compra con Javascript. Incluye solución. Se practica la creación y eliminación de nodos, this, addEventListener, ...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.