我一直在研究React中制作的许多模式，其中很多似乎都存在这个问题，因此我在jsFiddle中放了一个简单的例子来演示这个问题。
摘录中的代码：
handleOutsideClick = e => {
if (e.target.id === "modal-view-info") {
this.props.closeSelf();
}
}
基本上，它可以工作（在模态外部单击将其关闭）。问题是我要使其仅在click事件开始并在模态之外结束时才关闭模态。也就是说，如果您在模式外部启动mousedown，但是将其拖到相应鼠标向上的模式内部，则模式不应关闭。同样，如果在模态内部开始单击并在模态外部结束单击，则不应关闭它。
我已经将它弄乱了一段时间，我相信问题在于浏览器认为e.Targetclick事件中的from是父元素。也就是说，如果您开始在子元素内部单击，然后释放父元素内部的鼠标按钮，e.Target则将成为父元素。e.Target在相反的情况下，它将也是父元素。这使事情变得棘手。
是否可以修改代码段以包含此功能？我已经在整个代码库中使用了这种模态代码，因此我宁愿只解决此问题，而不要使用完全不同的设计。
不要听整个模式上的click事件。取而代之的是，在模式后面放置一个隐藏的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>
)
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句