繁体   English   中英

文档上的 mouseenter 和 mouseleave 事件侦听器在 Firefox 中不起作用

[英]mouseenter and mouseleave event listeners on document not working in Firefox

以下代码在 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>

尝试为页面提供尺寸并改用正文

 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

可能是因为页面没有完全加载:

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 上工作。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM