Me encuentro con esto mucho, y normalmente lo soluciono con un truco agregando el estilo "eventos de puntero: ninguno" a los elementos secundarios del botón. Sin embargo, de una vez por todas me gustaría entender por qué este código no funciona.
Por ejemplo esta respuesta dice:
Ejemplo
<div> <ul> <li></li> </ul> </div>En la estructura anterior, suponga que se produjo un evento de clic en el elemento li.Al capturar el modelo, el evento será manejado por el div primero (haga clic en los controladores de eventos en el div se activará primero), luego en el ul, luego en el último elemento de destino, li.
Si pruebo el ejemplo citado anteriormente, todo lo que veo es que ocurre el controlador de eventos <li> , no uno para <li> y <div>
Digamos que tengo un botón con una imagen. Si se hace clic en el botón, se ejecuta el controlador de eventos, si se hace clic en la imagen del botón, no se ejecuta el controlador de eventos. De acuerdo, eso es comprensible, excepto que he especificado useCapture = true en el controlador de eventos, por lo que espero que el controlador de eventos comience a capturar en el elemento html raíz y avance hasta el elemento real en el que se hizo clic (que es interrumpido por el preventDefault() continuación)..
function working(event) { if (event.target.id == "BUTTON") { alert("Its working!") event.preventDefault(); } } document.addEventListener('click', working, true); <button id="BUTTON" type="button"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"> Works on text but not image</button>Sigo leyendo sobre burbujeo vs captura, y creo que lo entiendo, pero claramente no lo hago porque el código que escribo no funciona.
Esto se debe a que usa la delegación de eventos, por lo que la captura se realiza en el document . useCapture no tiene sentido aquí.
Una solución es usar el closest en evt.target para recuperar el primer padre con id #BUTTON y actuar en consecuencia.
function working(event) { if (event.target.closest("#BUTTON")) { alert("Its working!"); } } document.addEventListener('click', working); <button id="BUTTON" type="button"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"> Works on text but not image</button> Otra solución es agregar el oyente al propio elemento (usando [useCapture = ]true ). En ese caso, la captura comienza en el elemento al que se agrega el detector de eventos.
function working() { alert("Its working!"); } document.querySelector(`#BUTTON`).addEventListener('click', working, true); <button id="BUTTON" type="button"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"> Works on text but not image</button>aquí tienes doble signo de igual
(evento.objetivo.id == "BOTÓN")
solo tiene que haber uno y funciona
(evento.objetivo.id = "BOTÓN")