如果您在模态内开始或结束点击事件，如何防止简单的 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/

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

How to prevent a simple React modal from being closed if you either start or end the click event inside the modal?

javascript

events

modal-dialog

reactjs