Tengo varios elementos HTML que representan mosaicos que se voltearán al hacer clic. Cada elemento tiene un contenedor div, que contiene dos divs, uno para el anverso y el reverso del mosaico.
<div class="flip-container" data-tile> <div class="flipper"> <div class="front white"> <!-- front content --> </div> <div class="back blue"> <!-- back content --> </div> </div> </div>Tengo la animación resuelta en CSS, por lo que los mosaicos "voltean" al pasar el mouse. Hasta aquí todo bien. Ahora estoy tratando de cambiar el classList del "flip-container" al hacer clic, para que se llame a un nombre de clase diferente desde mi hoja de estilo.
Mi problema es que mi función handleClick está dirigida solo al "back-blue" del div interno, y no al "flip-container" que contiene ambos divs.
const tileData = document.querySelectorAll('[data-tile]') const flipContainers = Array.from( document.getElementsByClassName('flip-container') ) flipContainers.forEach((container) => { container.addEventListener('click', handleClick, { once: true }) }) function handleClick(e) { console.log('clicked') const container = e.target const currentClassColor = 'blue' fixColor(container, currentClassColor) } function fixColor(container, currentClassColor) { container.classList.add(currentClass) }Intenté consultar el "flip-container" seleccionando la etiqueta de datos y también tomando una matriz del nombre de clase específico. En ambos casos, el elemento completo aún se captura y el objetivo del clic se aplica solo al div interno. Supongo que tiene sentido por qué sucede esto, pero ¿hay alguna forma de acceder al contenedor incluso si el destino del clic es uno de los divs internos?
Lo que quieres es probablemente e.currentTarget .
La propiedad de solo lectura currentTarget de la interfaz Event identifica el destino actual del evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elemento al que se ha adjuntado el controlador de eventos, a diferencia de Event.target, que identifica el elemento en el que se produjo el evento y que puede ser su descendiente.
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
Si eso no funciona para su caso, querrá probar e.currentTarget.parentNode
e.target es el div en el que se hizo clic, si desea el div al que está adjunto el controlador de eventos, puede usar this palabra clave o e.currentTarget .
function handleClick(e) { console.log('clicked') // const container = this const container = e.currentTarget const currentClassColor = 'blue' fixColor(container, currentClassColor) }