仅向父div

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功能，但它仍然会向上冒泡 - ＆gt;调用父onClick。为了防止这种情况，我们必须为子项添加onClick，然后只需要stopPropagation（）