Geben Click-Ereignis nur zu Elternteil div

Question

Ich habe ein Overlay erstellt und in diesem Overlay gibt es ein anderes div. Ich möchte das Overlay schließen, wenn der Benutzer auf den Überlagerungsteil klickt und nichts tut, wenn der Benutzer auf das untergeordnete div klickt. Ich habe das Schließen der Überlagerungsfunktion implementiert. Das Problem ist, dass es das Overlay schließt, selbst wenn der Benutzer auf das Kinddiv klickt. Wie kann ich das beheben?

Also im Grunde sollte das Overlay nicht geschlossen werden, wenn der Benutzer irgendwo in diesem div klickt.

<div className="ques_preview_div"> 

</div> 

Answer 1

meine Antwort daher nicht funktionierte habe ich eine CodePen

function childClick(event){ 
    event.stopPropagation() 
    console.log('child') 
} 

das Problem auf Ereignis Sprudeln des Kindes basiert. Wenn also auf das Kind geklickt wird, obwohl es keine onClick-Funktion hat, blubbert es immer noch nach oben -> der Elternteil onClick wird aufgerufen. Um dies zu verhindern, müssen wir ein onClick für das Kind hinzufügen und einfach stopPropagation()