Eventos DOM: stopPropagation vs preventDefault() vs return false

¿Cuál usar entre `event.stopPropagation()`, `event.preventDefault()` y `return false` en eventos?

Siento que siempre estoy confundido por una cosa cuando se trata de manejar eventos DOM en JavaScript.

¿Cuándo debo invocar stopPropagation()el objeto de evento? ¿Cuándo debo invocar preventDefault()el objeto de evento? ¿Debería return false?

Evento.stopPropagation

Supongamos que quiero manejar un evento de clic en un elemento.

De manera predeterminada, un evento en un elemento DOM se activa en el elemento específico en el que se hace clic (por ejemplo, un botón) y se propagará a todo su árbol de elementos padre, a menos que se detenga.

Quiero asegurarme de que el evento se maneje en mi controlador de eventos y se “detendrá” allí.

Puede detener la propagación llamando stopPropagation()al método de un Eventobjeto, generalmente al final del controlador de eventos:

const link = document.getElementById('my-link')link.addEventListener('mousedown', event = { // process the event // ... event.stopPropagation()})

Evento.preventDefault

Llamar al preventDefault()método del objeto de evento cancelará el manejo predeterminado que el navegador está programado para ejecutar.

Abrir una nueva página en un evento ade elemento click, por ejemplo.

O enviar uno formsobre el submitevento.Te recomendamos Què fer, què visitar i on menjar a Olot?

preventDefault()Para personalizar por completo la acción, lo que debes hacer es llamar . Quizás creando una fetchsolicitud para cargar algo de JSON en lugar de abrir una nueva página al hacer clic en un enlace.

Se ejecutarán otros controladores de eventos definidos en este mismo elemento, a menos que llames a event.stopImmediatePropagation().

Regresandofalse

Esto es especialmente confuso para los desarrolladores de jQuery antiguos (o actuales). En jQuery, el retorno falsede un controlador de eventos llamado Event.preventDefaultand es automático Event.stopPropagationpara nosotros.

En JavaScript vanilla, return falseun controlador de eventos no hace nada .

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Eventos DOM: stopPropagation vs preventDefault() vs return false

¿Cuál usar entre `event.stopPropagation()`, `event.preventDefault()` y `return false` en eventos?

programar

es

2025-01-09

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente