为什么 Firefox 在页面加载时会触发 mouseenter 事件？

Question

当悬停在一个元素上然后刷新页面时（不移动鼠标）：

• Chrome 不会在页面加载时触发 mouseenter 事件
• Firefox 会在页面加载时触发 mouseenter 事件

下面是一个示例 sn-p。要重现此问题，请将鼠标悬停在 div 上，然后刷新页面。在 Chrome 中，div 不包含“mouseenter”。在 Firefox 中，确实如此。

请注意，这在 Stacksn-ps 环境中不起作用，因为您需要先单击“运行 sn-p”。 JSFiddle：https://jsfiddle.net/9fu6cx5d/7/

let div = document.getElementById('my-div');

div.addEventListener('mouseenter', function () {
  div.innerHTML = 'mouseenter';
});

#my-div {
  width: 150px;
  height: 150px;
  background-color: #aaaaaa;
}

<div id="my-div">
</div>

哪个浏览器的行为正确？我如何才能解决行为上的差异，或者至少让它们的行为相同？

Chrome 版本：59.0.3071.115（官方版本）（64 位）

Firefox 版本：54.0（64 位）

Answer 1

正如 cmets 中所指出的，根据规范，Chrome 的行为是正确的。以下是关于如何解决差异的想法。

您可以通过在文档加载时检查鼠标是否在 div 的边界内来确保您获得正确的值。不幸的是，在 JS 中没有办法在不触发事件的情况下检查鼠标位置，因此您将不得不求助于一些涉及 CSS 悬停规则并在 $(document).ready 上检查它们的技巧。

引用this hilarious answer：

用覆盖整个文档的 div 覆盖您的页面。里面 那，创建（比如说）2,000 x 2,000 个元素（这样 :hover 伪类将在 IE 6 中工作，请参阅），每个 1 像素大小。创建一个 CSS：那些改变属性的元素的悬停规则（让我们 说字体系列）。在您的负载处理程序中，循环遍历 4 个 百万个元素，检查 currentStyle / getComputedStyle() 直到 您会找到带有悬停字体的那个。从此推断 元素来获取文档中的坐标。

注意不要这样做。

虽然您绝对不应该这样做，但如果您只需要解决浏览器的怪癖，那么使用无效的悬停样式来检查元素是否悬停而不需要 JS 事件的一般想法是一个很好的想法。我在下面的示例中使用font-weight，但您可以将其更改为适合您的任何内容。

CSS

#my-div:hover {font-weight:700;}

js

// Pseudocode!

var mouseIsInside = false,
    div = $('#my-div');

$(document).ready(function(){
    if (div.css('font-weight') === 700) {
        mouseIsInside = true;
    }

    doStuffIfMouseInside();
});

div.on('mouseenter', function(){
    mouseIsInside = true;
    doStuffIfMouseInside();
})

function doStuffIfMouseInside() {
    if (mouseIsInside) {
        ...
    }
}

Answer 2

如果您在代码周围添加(function(){})();，它似乎在两种浏览器中都有效。

似乎 firefox 可能在 dom 可用之前触发事件，从而导致 mousein/out 事件出现问题。

见：https://jsfiddle.net/9fu6cx5d/8/