Modal 在 React 中关闭 modal 之外的 onMouseUp

Question

我有一个 div.modal-container DOM 节点，它有一个 div.modal 节点，当单击它之外的任何地方时，该模式会关闭。在这个模式中，我有一个可拖动的图像，用户可以对其进行调整。但是，当用户在此模态中执行 onMouseDown 并将其拖动以使鼠标退出模态，然后触发模态容器中的 onMouseUp 事件时，模态将关闭。有什么办法可以防止模态之外的模态 onMouseUp 关闭吗？

模式不应该在模式之外关闭 onMouseUp。

function App() {
  const [modalState, setModalState] = useState(false);
  const modal = useRef();
  const closeModal = () => setModalState(false);
  const openModal = () => setModalState(true);
  return (
    <div className="modal-container" onClick={() => closeModal()}>
      {modalState ? (
        <div className="modal" onClick={(e) => e.stopPropagation()} ref={modal}>
          <span className="close-button" onClick={(e) => closeModal()}>
            <b>X</b>
          </span>
        </div>
      ) : (
        <button
          onClick={(e) => {
            e.stopPropagation();
            openModal();
          }}
        >
          Open Modal
        </button>
      )}
    </div>
  );
}

上述问题的codepen链接：https://codepen.io/kartikey09/pen/VwVYvMv

重现问题的步骤：

1. 单击打开模态，
2. 在打开的绿色模式中按左键单击。
3. 将鼠标拖动到灰色模态容器 div，同时按左键单击。
4. 向上抬起左键。

Answer 1

单击事件由单个 mousedown 事件和相应的 mouseup 事件触发，所有这些都在同一元素的范围内。

根据您的情况，您可以采用背景概念，就像下面的示例一样。

App.js

function App() {
  const [modalState, setModalState] = useState(false);
  const modal = useRef();
  const closeModal = ()=>setModalState(false);
  const openModal = ()=>setModalState(true);
  return (
    <div className="modal-container" >
      {!modalState && (
        <button
          onClick={(e) => {
            e.stopPropagation();
            openModal();
          }}
        >
          Open Modal
        </button>
      )}
      {modalState && (
        <>
        <div className = "modal" onClick={(e) => e.stopPropagation()} ref={modal}>
          <span className = "close-button" onClick={(e) => closeModal()}>
            <b>X</b>
          </span>
        </div>
        <div className="back-drop" onClick={() => closeModal()}></div>
          </>
      )}
    </div>
  );
}

CSS

.modal{
  width: 200px;
  height: 200px;
  background-color: green;
  display: flex;
  flex-direction: row-reverse;
  z-index: 100;
}

.close-button:hover{
  cursor: pointer;
}

.modal-container{
  width: 500px;
  height: 500px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-drop {
  position: absolute;
  width: 500px;
  height: 500px;
  background-color: red;
  z-index: 10;
}