Cancelar la acción por defecto en JavaScript
A veces es necesario cancelar la acción por defecto de una etiqueta usando JavaScript. Por ejemplo, cancelar la navegación al hacer clic en un enlace. Generalmente esto se requiere cuando usamos ese enlace simplemente para ejecutar algún código. En este caso, que al hacer clic en el enlace se produzca la navegación, no es algo que deseemos.
La cancelación de la acción por defecto se realiza
utilizando el objeto Event. Para ello,
tiene un método especial preventDefault(),
que debe ser llamado en cualquier lugar del
manejador de eventos.
Probemos en la práctica. Supongamos que tenemos el siguiente enlace:
<a href="/" id="elem">enlace</a>
Hagamos que al hacer clic en el enlace no se produzca la navegación a otra página:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function(event) {
event.preventDefault();
console.log('¡No puedes navegar por este enlace!');
});
Se dan enlaces. Haz que al hacer clic en un enlace se escriba su href al final, y no se produzca la navegación.
Se dan dos inputs, un párrafo y un enlace. Supongamos que se introducen números en los inputs. Haz que al hacer clic en el enlace se escriba la suma de los números introducidos en el párrafo.
