Algunas etiquetas HTML tienen un comportamiento por defecto. Por ejemplo, el elemento <details> es un acordeón HTML o elemento colapsable. Si haces click sobre él, su contenido se muestra (si estaba oculto) o su contenido se oculta (si se estaba mostrando). Ese es su comportamiento por defecto:
<details>
<summary>More info</summary>
<div>The cake is a lie The cake is a lie The cake is a lie The cake is a lie</div>
</details>
Cuando estamos trabajando en Javascript, pueden existir situaciones en las que queremos que se anule este comportamiento por defecto: por ejemplo, para cambiarlo or reimplementarlo nosotros mismos.
Para ello, tenemos algunos mecanismos relacionados a nuestra disposición:
| Propiedad o Método | Por defecto | Descripción | |
|---|---|---|---|
.defaultPrevented | false | Propiedad que indica si el comportamiento por defecto se está evitando. | |
.preventDefault() | - | Evita que se realice el comportamiento por defecto del evento. | |
Veamos como funcionan con algunos ejemplos:
El método .preventDefault()
Mediante el método .preventDefault() se establecerá el flag .defaultPrevented a true y podremos evitar el comportamiento base por defecto de dicho evento y añadirle otro diferente:
<details>
<summary>More info</summary>
<div>The cake is a lie The cake is a lie The cake is a lie The cake is a lie</div>
</details>
<script>
const details = document.querySelector("details");
details.addEventListener("click", (event) => {
event.preventDefault();
alert("Has hecho click pero hemos eliminado el comportamiento por defecto.");
});
</script>
Observa que al pulsar sobre el elemento <details>, el acordeón ya no se expande ni se contrae. Hemos evitado su comportamiento por defecto. Además, hemos añadido nuestra propia lógica, reimplementando su funcionalidad (en este caso, un alert).
Obviamente, cada elemento HTML tiene su propio comportamiento por defecto.
La propiedad .defaultPrevented
Mediante la propiedad defaultPrevented podemos comprobar si la funcionalidad de un elemento HTML ha sido configurada para evitarse. Observa el ejemplo anterior modificado:
<details>
<summary>More info</summary>
<div>The cake is a lie The cake is a lie The cake is a lie The cake is a lie</div>
</details>
<p>Se ha llamado a <code>event.preventDefault()</code>.</p>
<script>
const details = document.querySelector("details");
const p = document.querySelector("p");
details.addEventListener("click", (event) => {
event.preventDefault();
const status = event.defaultPrevented ? "evitado" : "activado";
alert("Has hecho click. El comportamiento por defecto está: " + status);
});
</script>
El método preventDefault() es una función muy útil cuando queremos personalizar el funcionamiento de un elemento de una página y obligarlo a que deje de realizar su comportamiento por defecto, para luego implementarles una funcionalidad diferente o más específica.
Recuerda siempre que evitar el comportamiento por defecto de un elemento tiene un coste, y es que los elementos de las páginas deben ser predecibles. No cambies su comportamiento por defecto, salvo que tengas una buena razón para hacerlo.
