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 lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</head>
<body>
<a href="https://www.google.com" id="enlace">google</a>
<script src="funciones.js"></script>
</body>
</html>
funciones.js
document.getElementById('enlace').addEventListener('click', (e) => {
e.preventDefault()
let url = e.target.getAttribute('href')
window.open(url)
})
Veamos las partes más importantes de nuestro problema:
document.getElementById('enlace').addEventListener('click', (e) => {
e.preventDefault()
let 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.