Giving click event only to parent div

Question

I have created a overlay and inside that overlay there's another div. I want to close the overlay when the user click on the overlay part and not do anything if the user clicks the child div. I have implemented the closing the overlay function.But the issue is it closes the overlay even if the user clicks on the child div. How can I fix this?

<div id="overlay" onClick={this.props.hideOverlay}>

                <div className="ques_preview_div">

                </div>
</div>

So basically the overlay should not close if the user clicks somewhere in this div.

<div className="ques_preview_div">

</div>

I think this might be a duplicate of http://stackoverflow.com/questions/28511207/react-js-onclick-event-handler - or at least, the answers to that questions should help to solve this (checking event.target in the click handler) — Constantin Groß, Feb 14 '17 at 10:49
I use this for onClick event in the overlay div >>> this.setState({ showComponent: false, }); — CraZyDroiD, Feb 14 '17 at 10:55

score 1 · Answer 1 · answered Feb 14 '17 at 11:11

My previous answer did not work therefore I created a CodePen

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

the problem is based on event bubbling of the child. So if the child is clicked although it does not have a onClick function it still bubbles upwards -> the parent onClick is called. To prevent this we have to add a onClick for the child and simply stopPropagation()

Giving click event only to parent div

1 Answers1