Tengo una estructura como esta:

 <div className="content-container chat-on"> <div className="inner container"> <section className="some more classes> <div className="button">click here</div> </section> </div> </div>

Pero necesito que toda el área tenga un detector de eventos, el div con la clase de conversación.

Debido a que en realidad hay otro div con el mismo nombre de clase que necesita el mismo detector, había estado usando document.getElementsByClassName('chatOn') y luego usé un bucle for of en la matriz devuelta para agregar el detector de eventos. Aunque esto funcionó, de vez en cuando parece causar un efecto secundario extraño (no necesariamente relevante para la pregunta actual).

Ahora lo que estoy tratando de hacer es algo así como:

 document.addEventListener("click", (event) => { if (event.target.matches("chat-on) { // function goes here }

Pero el problema es que, cuando el usuario hace clic, el objetivo solo registra el elemento anidado más alejado, y no el que tiene el nombre de clase de chat-on. He intentado

if (event.composedPath().includes('chat-on')

Pero eso siempre sale falso. ¿Hay alguna forma de acceder a los nombres de las clases en los elementos principales del destino del evento de clic?