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 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.


Retornar