¿La tasa de rebote de tu página web es un quebradero de cabeza?
¿Tienes un recurso que la gente quiere descargar y te gustaría incrementar el tiempo de permanencia media en tu web?
Javascript puede acudir en tu ayuda. Tal vez sea un poco de #blackHat … pero google no se enterará. O si.
¿sientes curiosidad?
En esta publicación explico como hacerlo con un ejemplo que suelo usar en clase de web para explicar el uso de addEventListener()
, removeEventListener()
y preventDefault()
El código html
El código html usado para este ejemplo es simple.
Un enlace sin nada en especial.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>preventDefault()</title>
<meta name="author" content="francesc ricart"/>
</head>
<body>
<a href="https://francescricart.com/tutorial-javscript" id="enlace">Enlace que se activa pasados 2 segundos de cargarse la página</a>
</body>
</html>
preventDefault() , addEventListener() , removeEventListener()
Cuando se carga la página asignamos un evento de tipo click que inhabilita el funcionamiento normal del enlace.
Asignamos también un setTimeout que se dispara pasados 2 segundos.
Llegado este intervalo de tiempo se dispara una función que elimina la función que inhabilitaba el funcionamiento normal del enlace.
En realidad en ningún caso estamos habilitando o inhabilitando el enlace sino que lo que estamos haciendo es jugar con añadir un addEventListener o quitarlo.
var zEnlace = document.getElementById("enlace");
window.addEventListener("load",inicializar);
function inicializar(){
zEnlace.addEventListener("click",pararEvento);
setTimeout(eliminarPararEvento,2000)
}
function pararEvento(zE){
var zEvento = zE || window.event;
zEvento.preventDefault()
}
function eliminarPararEvento(){
zEnlace.removeEventListener("click",pararEvento);
}
¡Hola!
Querido lector,
Si quieres repasar la teoría relacionada con los conceptos explicados en este ejercicio tal vez sea interesante leer estas lecturas:
- Eliminar el comportamiento por defecto de un elemento
- Eliminar eventos con javascript. removeEventListener()
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta