preventDefault 不适用于模态窗口

Question

我正在尝试创建一个模态窗口，可以通过单击模态窗口本身或单击关闭按钮来关闭

const onCloseHandler = (e) => {
    e.stopPropagation();
    setIsModalOpen(false);
};

return (
    <div className="overlay" onClick={onCloseHandler}>
        <div className="modal-window">
            <div type="button" className="close-button" onClick={onCloseHandler}>
                <CloseIcon />
            </div>

            <img src={image} alt="task" className="modal-image" />
        </div>
    </div>
);

问题是 preventDefault 不起作用，因此即使我单击带有 modal-window 类的图像或 div，模式窗口也会关闭。

我试着用

const onCloseHandler = (e) => {
    if (e.target !== e.currentTarget) {
        return;
    }

    setIsModalOpen(false);
};

它有效，但它似乎不是一个好的解决方案。当点击 CloseIcon 时，它也不会关闭模态窗口。它只是一个内部的 svg，所以不可能在上面使用 pointer-events: none。

Answer 1

更简洁的解决方案可能是将 overlay 移出 modal-window，因此两个组件都是独立的。

<>
<div className="overlay" onClick="{onCloseHandler}"></div>

<div className="modal-window">
  <div type="button" className="close-button" onClick="{onCloseHandler}">
    <CloseIcon />
  </div>
  <img src="{image}" alt="task" className="modal-image" />
</div>
</>

或者，也许根据某些属性对 e.currentTarget 进行条件检查也可以。