50 - Desactivación del evento por defecto de un elemento HTML (DOM)


Hay elementos HTML que tienen por defecto eventos propios. El más característico es el hipervínculo <a>. Como sabemos por defecto al presionar en el mismo se carga otra página en el navegador.

Desde JavaScript podemos detectar mediante el evento click la selección del hipervínculo y hacer alguna actividad. Si queremos que no se dispare la carga de la página debemos hacer:

e.preventDefault();

Siendo e el objeto de tipo event que llega como parámetro a la función.

Para probar su funcionamiento crearemos una página con un hipervínculo, al presionar el mismo capturaremos dicho evento y mediante JavaScript abriremos en otra pestaña del navegador la página indicada en el hipervínculo.

pagina.html

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<a href="http://www.google.com" id="enlace">google</a>
</body>
</html>

funciones.js

window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob=document.getElementById('enlace');
  ob.addEventListener('click',presionEnlace,false);
}

function presionEnlace(e)
{
  e.preventDefault();
  var url=e.target.getAttribute('href');
  window.open(url);     
}

Veamos las partes más importantes de nuestro problema:

function presionEnlace(e)
{
  e.preventDefault();
  var url=e.target.getAttribute('href');
  window.open(url);     
}

Es decir llamamos al método preventDefault del objeto e que llega como parámetro a la función. Seguidamente obtenemos la referencia del atributo href y procedemos a la apertura de otra pestaña llamando al método open del objeto global window.


Retornar