javascript - ElementsFromPoints 不适用于 ResizeObserver

Question

我遇到了一个问题，我什至不明白这是因为 ReactJS，还是只是 JavaScript。
基本上，如果 ResizeObserver 正在观察 DOM 的元素，则 document.elementsFromPoint() 方法将不起作用。

这是重现问题的 fiddle :

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 (
            <div ref={this.divRef} className="home-div" />
        );
    }
}

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

@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;
}

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

<div id='root'></div>

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

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

这是一个错误吗？还是我在某个地方遗漏了一些东西？

Answer 1

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

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

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