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

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

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

下面是一个示例代码段。要重现问题，请将鼠标悬停在

div

上，然后刷新页面。在Chrome中，

div

不包含“mouseenter”。在Firefox中，确实如此

请注意，这在Stacksnippets环境中不起作用，因为您需要先单击“运行代码段”。JSFiddle：

let div=document.getElementById（'my-div'）；
div.addEventListener（'mouseenter'，function（）{
div.innerHTML='mouseenter'；
});
#我的div{
宽度：150px；
高度：150像素；
背景色：#AAAAA；
}

如果添加
（function（）{}）（）围绕您的代码，它似乎在两种浏览器中都能工作

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

请参阅：
正如评论中指出的，根据规范，Chrome的行为是正确的。下面是一个如何解决差异的想法

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

引述：

用覆盖整个文档的div覆盖页面。在…内
也就是说，创建（比如）2000x2000个元素（这样：hover
伪类将在IE6中工作，请参阅），每个1像素大小。创建一个
CSS：更改属性的元素的悬停规则
比如字体系列）。在加载处理程序中，循环执行4个
百万个元素，检查currentStyle/getComputedStyle（）直到
您可以找到带有悬停字体的。从这个推断
元素以获取文档内的坐标

注意，不要这样做

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

css
js
如果您聚焦“运行”按钮，将鼠标移动到下方区域，并用enter键激活，则可以在此处演示此行为。
当指向设备（通常是鼠标）移动到连接了侦听器的元素上时，将触发mouseenter事件。
根据文档，Chrome是具有正确行为的设备。至于变通方法，可以在一个on文档中尝试吗？我在React组件中遇到了这个问题。mouseenter导致重新渲染，从而导致mouseenter事件，等等循环和崩溃应用程序。有什么更新吗？如何防止页面重新加载触发鼠标事件？嗯，这可能是一种解释。然而，对我来说，这并没有任何区别：/n在您的实现中还有其他JS吗？正如我在Firefox 54.0和54.0.1中测试的那样，它对我来说很好。没有更多的JS-我只是运行你链接的代码片段并执行相同的操作。但这似乎有些奇怪。Chrome的行为肯定不是正确的，它们甚至与自身不一致，请查看新节点的附加位置，以及如果鼠标首先在文档上处于活动状态，mouseenter事件将在哪个节点上触发。即使：hover hack也不起作用，因为它们只是懒得在页面加载时检查鼠标状态，并且在鼠标激活之前根本不会标记：hover元素。
#my-div:hover {font-weight:700;}

// 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) {
        ...
    }
}