Tengo una serie de elementos a los que he agregado el mismo detector de eventos y necesito eliminar un elemento específico de la matriz, pero me gustaría mantener el detector de eventos en él.
Por supuesto que podría agregarlo por separado, pero me preguntaba si había una manera fácil.
Aquí hay una pluma para mostrar eso. La función que se supone que elimina el foco de los botones después de un tiempo no se ejecuta en el tercer botón.
Aquí está el JavaScript para mayor claridad:
const buttons = [...document.querySelectorAll(".button")]; let dropButton; for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function () { setTimeout(() => { buttons[i].blur(); }, 500); }); if(buttons[i].classList.contains("drop")) { dropButton = buttons.splice(i, 1); i--; } }Gracias por tu ayuda :)
El detector de eventos se mantiene conectado, pero al presionar el botón "soltado", el controlador desenfocará el botón incorrecto. Esto se debe a que su controlador accede a los buttons[i] mediante un índice que ya no es válido.
Estas son otras tres soluciones que pueden ser posibles para su controlador:
// assigning the button to a closure scoped constant const b = buttons[i]; buttons[i].addEventListener("click", function () { setTimeout(() => {b.blur();}, 500); })o
// the "this" context in the handler is the button buttons[i].addEventListener("click", function () { setTimeout(() => { this.blur();}, 500); })o
// the handler get and event whose "target" key is the button buttons[i].addEventListener("click", function (event) { setTimeout(() => {event.target.blur();}, 500); })