为什么Firefox会在页面加载时触发mouseenter事件？-Java 学习之路

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

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

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

请注意，这在Stacksnippets环境中不起作用，因为您需要先单击"run snippet" . 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位）

2 回答

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

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

引用this hilarious answer：

使用覆盖整个文档的div覆盖页面 . 在其中，创建（比方说）2,000 x 2,000个元素（以便：hover伪类将在IE 6中工作，请参阅），每个像素大小为1个像素 . 为那些更改属性的元素创建一个CSS：hover规则（比如说font-family） . 在你的加载处理程序中，遍历400万个元素中的每一个，检查currentStyle / getComputedStyle（），直到找到带有悬停字体的元素 . 从该元素推断回来以获得文档中的坐标 . 注：不要这样做 .

虽然您绝对不应该在下面的示例中使用 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) {
        ...
    }
}
```
回复于 2024-05-03T16:13:08+08:00
1

如果在代码周围添加 (function(){})(); ，它似乎适用于两种浏览器 .

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

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

回复于 2024-05-03T16:13:08+08:00

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

2 回答

css

js

相关问题