Javascript 如果在模式内启动或结束click事件，如何防止简单React模式关闭？

我一直在研究React中的很多情态动词，其中很多似乎都有这个问题，所以我用了一个例子来说明这个问题

代码段中的代码：

handleOutsideClick = e => {
    if (e.target.id === "modal-view-info") {
      this.props.closeSelf();
    }
}

基本上，它是工作的（在模式外单击关闭它）。问题是，我希望这样做，只有当click事件在模式之外开始和结束时，模式才会关闭。也就是说，如果在模式外部启动鼠标向下移动，但将其拖动到相应鼠标的模式内部，则模式不应关闭。类似地，如果在模态内部开始单击并在模态外部结束，则不应关闭

我一直在困扰它，我认为问题是浏览器从一个点击事件中考虑<代码> E.Abjult<代码>为父元素。也就是说，如果开始在子元素内单击，然后在父元素内释放鼠标按钮，则

e.Target

将成为父元素

e.Target

也将是相反情况下的父元素。这让事情变得棘手

---

是否可以修改代码段以合并此功能？我已经在我的代码库中使用了这个模式代码，所以我宁愿修复它，而不是使用完全不同的设计。

不要在整个模式上侦听单击事件。相反，在模态后面放置一个隐藏的div，该div将捕获仅在模态外部的单击

CSS

组成部分

class Modal extends React.Component {
  constructor(props) {
    super(props);

    }

  render() {
    return (
      <div>
        <div id="modal-view-info" className="modal" >
          <div className="modal-close" onClick={this.props.closeSelf} />
          <div className="modal-content">
            Hello how are you doing?
            Well I hope!
          </div>
        </div>
      </div>
    )
  }
}

类模态扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
你好，你好吗？
我希望如此！
)
}
}

---

绝对精彩！非常感谢你！

class Modal extends React.Component {
  constructor(props) {
    super(props);

    }

  render() {
    return (
      <div>
        <div id="modal-view-info" className="modal" >
          <div className="modal-close" onClick={this.props.closeSelf} />
          <div className="modal-content">
            Hello how are you doing?
            Well I hope!
          </div>
        </div>
      </div>
    )
  }
}