我创建了一个弹出库,该库使用React Portal将每个弹出窗口呈现到body
,以缓解overflow: hidden
问题。现在,弹出窗口可以打开其他弹出窗口,我想确定是否在这些弹出窗口层次结构之外的任何位置单击以关闭所有弹出窗口。如果它们是嵌套的,则可以为.contains
做一个e.target
,但是在这里,DOM层次结构将是平坦的(即,所有弹出窗口都是体内的同级兄弟)。由于React Portal的性质,只会嵌套React层次结构。我的问题是如何最好地检测在此弹出式层次结构内部还是外部单击?
答案 0 :(得分:0)
我最终使用react上下文将弹出窗口的关闭函数发送给其子级。子级(如果自己弹出)可以调用它自己的关闭函数,然后通过调用父级关闭函数来委托进一步传播。
答案 1 :(得分:0)
在检测反应子树之外的点击时遇到了相同的问题。 您需要做的是在DOM元素上设置处理程序,将其呈现在门户上。并且应将另一个处理程序添加到文档中。因此,您可以在事件冒泡到文档之前,使用处理程序对其进行“标记”。
针对此类情况编写软件包: https://www.npmjs.com/package/react-on-outside-event