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.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
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);
}
</script>
</head>
<body>
<a href="http://www.google.com" id="enlace">google</a>
</body>
</html>
El código javascript es:
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.