상위 본부에만 클릭 이벤트가 발생합니다

Question

오버레이를 만들었습니다. 오버레이 내에 다른 div가 있습니다. 사용자가 오버레이 부분을 클릭 할 때 오버레이를 닫고 사용자가 자식 div를 클릭하면 아무 것도하지 않겠습니다. 오버레이 함수를 닫는 구현했습니다.하지만 문제는 사용자가 자식 div 클릭해도 오버레이가 닫힙니다. 이 문제를 어떻게 해결할 수 있습니까?

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

       <div className="ques_preview_div"> 

       </div> 
</div> 

사용자가이 div의 어딘가를 클릭하면 기본적으로 오버레이가 닫히지 않습니다. 내 이전의 대답이 때문에 작동하지 않았다

<div className="ques_preview_div"> 

</div> 

Answer 1

나는 문제가 아이의 이벤트 버블 링을 기반으로하는 CodePen

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

를 만들었습니다. 따라서 onClick 함수가 없더라도 자식이 클릭되면 여전히 위쪽으로 거품이 발생합니다. -> 부모 onClick이 호출됩니다. 이를 방지하기 위해 어린이를위한 onClick을 추가하고 stopPropagation()을 추가해야합니다.