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:

Introducción a las animaciones Javascript: setInterval() y setTimeout()
- 668
Resumimos las funciones setInterval(), clearInterval y setTimeout(). Cuales son sus parámetros, que es una función anónima y como la llamamos.
Instrucción “this” de Javascript explicada paso a paso
- 248
Ejemplo explicado paso a paso para entender el concepto del this en javascript. Se empieza con el javascript en línea en el html para finalmente inicializar los eventos llamándolos directamente desde ...
Como llamar nodos del DOM mediante javascript
- 477
Repasamos los distintos métodos directos e indirectos y estrategias para acceder e identificar los nodos del DOM de modo inequívoco.
Javascript: Acoplamiento
- 576
En entradas anteriores hemos visto el origen de javascript como una de las aportaciones de Netscape a la web y como un lenguaje muy útil para aprender a programar. Este lenguaje de script nos permite ...
Estructura condicional switch en Javascript
- 693
Podemos escribir una estructura condicional mediante el if(){}else if(){}else{} o mediante el switch(){}. ¿Cuando usar una opción y no la otra? En esta entrada vemos un ejemplo para el switch y coment...
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 286
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Control de acceso con cookies Javascript para web de mayores de edad
- 36
Ejercicio avanzado de javascript para controlar el acceso de usuarios a una página web mediante el uso de cookies. Incluye solución.
Lista de la compra con javascript perfeccionada con cookies
- 30
Ejercicio javascript avanzado que crea una lista de la compra y almacena la información mediante cookies. Incluye solución.
La etiqueta noscript
- 309
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
Ejercicio – Cálculo del perímetro de un rectángulo mediante funciones
- 138
Ejercicio en el que se práctica de modo fácil la lógica de programación mediante el uso de funciones declaradas en JS.
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.