关于javascript：ElementsFromPoints不适用于ResizeObserver

ElementsFromPoints doesn't work with ResizeObserver

我面临一个问题，我什至不知道这是因为ReactJS还是JavaScript。
基本上，如果ResizeObserver正在观察DOM的元素，则方法document.elementsFromPoint()不起作用。

这里是一个小提琴，重现了这个问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

class App extends React.Component {
divRef;
resizeObserver;

constructor(props) {
super(props);

this.divRef = React.createRef();
this.resizeObserver = new ResizeObserver(entries => {
console.log("Div resized");
this.forceUpdate();
});
}

componentDidMount() {
console.log("|| DIDMOUNT CONSOLE ||");
console.log(document.elementsFromPoint(150,150));
this.resizeObserver.observe(this.divRef.current);
}

componentDidUpdate() {
console.log("|| DIDUPDATE CONSOLE ||");
console.log(document.elementsFromPoint(150,150));
}

componentWillUnmount() {
this.resizeObserver.unobserve(this.divRef.current);
}

render() {

return (

);
}
}

ReactDOM.render(<App />, document.getElementById('root'));

1
2
3
4
5
6
7
8
9
10
11
12
13

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
font-family: 'Montserrat', sans-serif;
}

.home-div {
background: blue;
width: 500px;
height: 200px;
resize: both;
overflow: auto;
}

1 2	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js">

如您所见，

使用document.elementsFromPoint()的componentDidMount()中的日志返回一堆元素。
而是再次使用document.elementsFromPoint()的componentDidUpdate()中的日志仅返回html元素，而不返回所有其他元素(即使点完全相同，也为(150, 150))。

现在，我认为React以某种方式重新渲染了整个DOM，因此，以前的内容不再存在于DOM中，但是componentDidUpdate()不可能只返回html元素：componentDidUpdate()是渲染完成后调用它，因此不可能只有html元素。

这是一个错误吗？还是我在某处缺少什么？

我想这是一个错误。显然，当document.elementsFromPoint()仅返回HTML元素时，在文档的某些奇怪状态下调用了观察者回调。您甚至不需要调用this.forceUpdate()，直接在观察者回调内部调用elementsFromPoint，您将获得相同的结果。每次调整div的大小时，我都会得到相同的结果。

我认为componentDidUpdate记录的日志相同，因为forceUpdate-> render-> DOM更新-> componentDidUpdate调用链是同步的，并且这种奇怪的DOM状态持续存在。好吧，可能DOM状态仅对elementsFromPoint调用很奇怪...

例如，如果使用setTimeout异步调用forceUpdate，则elementsFromPoint将正确显示所有div。