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.