I have a structure like this:

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

But I need the whole area to have an event listener, the div with the class of chat-on.

Because there is actually another div with the same class name that needs the same listener on it, I had been using document.getElementsByClassName('chatOn') and then using a for of loop on the returned array to add the event listener. Although this kind of worked, every so often it seems to cause a weird side effect (not necessarily relevant to the current question).

Now what I'm trying to do is something along the lines of:

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

But the problem is, when the user clicks, target is only registering the furthest nested element, and not the one with the class name of chat-on. I've tried

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

But that is always coming up false. Is there any way I can access the class names on the parent elements of the click event target?