javascript - 如果您在模态中开始或结束单击事件，如何防止简单的 React 模态被关闭？

Question

我看了很多React制作的模态，很多似乎都有这个问题，所以我整理了一个simple example in jsFiddle来演示问题。

代码片段中的代码:

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

基本上，它可以工作(在模式外部单击将其关闭)。问题是我想让它只有在单击事件在模态之外开始和结束时才关闭。也就是说，如果您在模态之外启动 mousedown，但将其拖动到相应 mouseup 的模态内部，则模态不应关闭。同样，如果您在模式内部开始单击并在模式外部结束单击，则它不应关闭。

我已经搞乱它有一段时间了，我相信问题是浏览器将点击事件中的 e.Target 视为父元素。也就是说，如果您开始在子元素内部单击，然后在父元素内部释放鼠标按钮，则 e.Target 将成为父元素。在相反的情况下，e.Target 也将是父元素。这让事情变得棘手。

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

Answer 1

不要监听整个模式上的点击事件。相反，在模态后面放置一个隐藏的 div，它将捕获仅在模态之外的点击。

CSS

.modal-close {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

组件

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>
    )
  }
}

https://jsfiddle.net/vdwr7Lg5/