27 Dic Eliminar el comportamiento por defecto de todos los enlaces de una web
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 pensada para personas que empiezan a aprender javascript. Dibuja una escalera con javascript y css. Incluye solución.
Explicamos como podemos obtener el ancho y la altura real disponibles de la ventana del navegador mediante Javascript puro y con jQuery
La consola del navegador es una herramienta imprescindible para cualquier aprendiz de Javascript. ¿Podemos darle un poco más de color y utilidad?
Repasamos las distintas formas que existen de asociar eventos javascript a etiquetas html. Ya sea por acoplamiento directo o como evento semántico. Comparamos también con addEventListener()
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...
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
No Comments