當瀏覽器在鼠標下方渲染元素時，是否有鼠標懸停的修復程序？

Question

在大多數（所有？）瀏覽器中，如果瀏覽器使用鼠標下方的mouseEnter / mouseOver偵聽器呈現元素，則不會觸發該事件。 因此，現在我們將鼠標懸停在元素上，而代碼的作用不像是將鼠標懸停在元素上。

有一個簡單的解決辦法嗎？

Answer 1

您可以使用MutationObserver監視所有HTML節點的更改，這些更改可能會將頁面上的元素移動到光標下方。 當發生任何此類更改時，您可以使用Document.elementFromPoint查找懸停的元素，然后在該元素上手動觸發 mouseover事件：

function dispatchArtificialMouseover() {
  const elementMouseIsOver = document.elementFromPoint(
    event.clientX,
    event.clientY
  );
  const mouseoverEvent = new MouseEvent("mouseover");
  elementMouseIsOver.dispatchEvent(mouseoverEvent);
}

const observerConfig = {
  attributes: true,
  childList: true,
  characterData: true,
  subtree: true
};

const observer = new MutationObserver(dispatchArtificialMouseover);
const rootElement = document.body;
observer.observe(rootElement, observerConfig);

但是，我想如果在任何頻繁更改的情況下（例如，當用戶在輸入中鍵入文本時），偵聽頁面上的所有更改將使頁面變慢。