文檔上的 mouseenter 和 mouseleave 事件偵聽器在 Firefox 中不起作用

Question

以下代碼在 Chrome 中正常工作，但在 Firefox 中不能正常工作。 在 Chrome 中，當我在瀏覽器內外移動鼠標時，控制台中會出現一些 output，但在 Firefox 中並非如此。 我的 Firefox 版本是 85.0.2。 任何幫助，將不勝感激。

 document.addEventListener("mouseenter", () => { console.log("mouseenter"); }); document.addEventListener("mouseleave", () => { console.log("mouseleave"); });

 html, body { width: 100vw; height: 100vh; background-color: red; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> </head> <body> </body> </html>

Answer 1

嘗試為頁面提供尺寸並改用正文

 document.querySelector("body").addEventListener("mouseenter", () => { console.log("mouseenter"); }); document.querySelector("body").addEventListener("mouseleave", () => { console.log("mouseleave"); });

 html, body { width: 100vw; height:100vh; background-color:red; }

事件監聽器的測試

 const addEventListener = EventTarget.prototype.addEventListener; EventTarget.prototype.addEventListener = function(name, handler) { addEventListener.call(this, name, function(event) { window.event = event; handler(event); }) }; function showEvent(e) { // just demonstrating that window.event is set console.log(e.type); } document.addEventListener('mouseenter', showEvent); document.addEventListener('mouseleave', showEvent); document.addEventListener('mouseover', showEvent); document.addEventListener('mouseout', showEvent);

 html, body { width: 100vw; height: 100vh; background-color: red; }

 https://stackoverflow.com/questions/47786133/workaround-for-firefoxs-lack-of-window-event

Answer 2

可能是因為頁面沒有完全加載：

window.onload = (event) => {
  const element = document.getElementsByTagName('body')[0];

  element.addEventListener("mouseenter", () => {
    console.log("mouseenter");
  });
  
  element.addEventListener("mouseleave", () => {
    console.log("mouseleave");
  });
};

現場演示： https://www.w3schools.com/code/tryit.asp?filename=GNQZGHTD6CC9

在 Firefox 上工作。

文檔上的 mouseenter 和 mouseleave 事件偵聽器在 Firefox 中不起作用

問題描述

2 個解決方案

解決方案1
1 2021-02-17 16:02:57

解決方案2
0 2021-02-17 16:14:07

文檔上的 mouseenter 和 mouseleave 事件偵聽器在 Firefox 中不起作用

問題描述

2 個解決方案

解決方案1 1 2021-02-17 16:02:57

解決方案2 0 2021-02-17 16:14:07

解決方案1
1 2021-02-17 16:02:57

解決方案2
0 2021-02-17 16:14:07