不要为嵌套的子元素触发 onClick答案

【问题标题】：Don't trigger onClick for nested child elements不要为嵌套的子元素触发 onClick
【发布时间】：2016-10-04 12:48:19
【问题描述】：

我有一个简单的模态组件：

function Modal(props) {
  return (
    <div className={cx(styles.overlay, { show: props.show })} onClick={props.onClose}>
      <div className={styles.modal}>
        <span className={styles.closeBtn} onClick={props.onClose} />
        {props.children}
      </div>
    </div>
  )
}

onClose 属性触发关闭模态，因此我将它附加到 styles.overlay（您通常在单击时会在模态上看到的暗覆盖）和 styles.closeBtn（模态的关闭按钮）。

除了styles.overlay 中的任何内容在单击时也会关闭模式之外，整个流程都有效，这不是我所追求的功能，因此我只需要在单击该特定元素而不是其子元素时将其关闭。

【问题讨论】：

标签： javascript reactjs click

【解决方案1】：

function Modal(props) {
   return (
     <div className={cx(styles.overlay, { show: props.show })} onClick= {props.onClose}>
       <div className={styles.modal} onClick={e => e.preventDefault()}>
         <span className={styles.closeBtn} onClick={props.onClose} />
         {props.children}
       </div>
   </div>
   )
}

我认为，最好的方法是将叠加层和模态框放在两个单独的 div 中，但这应该可以。

【讨论】：

很好——我们的解决方案很相似。

【解决方案2】：

将onClick(e)={e.stopPropagation();} 添加到模态对话框的点击处理程序；这应该可以防止它传播到叠加层。

希望它有效！祝你好运！

【讨论】：