仅将点击事件授予父 div答案

【问题标题】：Giving click event only to parent div仅将点击事件授予父 div
【发布时间】：2017-07-02 14:54:27
【问题描述】：

我创建了一个叠加层，在该叠加层内还有另一个 div。我想在用户单击覆盖部分时关闭覆盖，如果用户单击子 div 则不执行任何操作。我已经实现了关闭覆盖功能。但问题是即使用户单击子 div 也会关闭覆盖。我该如何解决这个问题？

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

                <div className="ques_preview_div">

                </div>
</div>

因此，如果用户单击此 div 中的某个位置，则基本上覆盖不应关闭。

<div className="ques_preview_div">

</div>

【问题讨论】：

粘贴更多代码有帮助！
我认为这可能与stackoverflow.com/questions/28511207/… 重复 - 或者至少，这些问题的答案应该有助于解决这个问题（在点击处理程序中检查 event.target）
你用什么来“关闭”叠加层？
我将它用于覆盖 div 中的 onClick 事件 >>> this.setState({ showComponent: false, });

【解决方案1】：

我之前的回答无效，因此我创建了一个CodePen

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

问题是基于孩子的事件冒泡。因此，如果单击子项，尽管它没有 onClick 函数，但它仍然会向上冒泡-> 调用父项 onClick。为了防止这种情况，我们必须为孩子添加一个 onClick 并简单地 stopPropagation()

【讨论】：