Question

将鼠标悬停在某个元素上然后刷新该页面（不移动鼠标）：

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

以下是一个示例代码段。要重现此问题，请将鼠标悬停在div上，然后刷新页面。在Chrome中，div不包含＆＃34; mouseenter＆＃34;。在Firefox中，确实如此。

请注意，这在Stacksnippets环境中不起作用，因为您需要点击＆＃34;运行代码段＆＃34;第一。 JSFiddle：https://jsfiddle.net/9fu6cx5d/7/

＆＃13;

let div = document.getElementById('my-div');

div.addEventListener('mouseenter', function () {
  div.innerHTML = 'mouseenter';
});

＆＃13;

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

＆＃13;

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

＆＃13;

哪种浏览器具有正确的行为？我如何解决行为差异或至少使它们的行为相同？

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

Firefox版本：54.0（64位）

Answer 1

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

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

引用this hilarious answer：

使用覆盖整个文档的div覆盖您的页面。内   那，创建（比方说）2,000 x 2,000个元素（以便：hover   伪类将在IE 6中工作，参见），每个像素大小为1。创建一个   CSS：用于更改属性的那些元素的悬停规则（让我们看看）   说font-family）。在您的加载处理程序中，循环遍历4中的每一个   百万个元素，检查currentStyle / getComputedStyle（）直到   你找到一个悬停字体。从中推断出来   元素来获取文档中的坐标。

N.B。不要这样做。

虽然你绝对不应该这样做，但是如果你只是需要解决浏览器问题，那么为了检查一个元素是否悬而不需要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/

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

2 个答案:

css

js