当内部 div 在 Firefox 中固定位置时，鼠标事件不会在身体上触发答案

【问题标题】：MouseEvents don't fire on body when inner div has position fixed in firefox当内部 div 在 Firefox 中固定位置时，鼠标事件不会在身体上触发
【发布时间】：2013-01-10 02:30:49
【问题描述】：

看this example
这是代码：
CSS：

div {
   position:fixed;
   top:100px;
   left: 320px;
   border: solid 1px blue;
}

Javascript：

 var i = 1;
 $(document.body).mousemove(function () {
     $("#text").html(i++);
 });

HTML：

<body>
    <div>
      <span>Test Text: </span>
      <span id="text"></span>
    </div>
</body>

此代码只是在鼠标移到主体上时更新跨度。它在 Google chrome 中运行良好，但在 Firefox 中，跨度仅在鼠标移到 div 上时更新，为了调试，我查看了 firebug，发现 body 的高度为 0，所以鼠标实际上并没有在 body 上移动，但是在 Google chrome body 中覆盖整个文档。

所以我的问题是：

哪种行为是正确的？（chrome 还是 firefox）？
是否在某处记录了正确的行为？

同样令人惊讶的是，当我在 jsfiddle 中添加此代码时，chrome 开始表现得像 firefox，有人能解释一下这种不寻常的行为吗？

编辑：我知道我可以通过在正文中添加height:100% 来使代码在两个浏览器中都工作，我想知道为什么在浏览器和正确的浏览器中会出现这种不同的行为。

【问题讨论】：

标签： javascript html google-chrome firefox cross-browser

【解决方案1】：

如果你添加这个 css，你可以看到发生了什么：

body { border: 1px solid red; }

我不完全确定其中的原因，但 Chrome 决定“body”元素应该是窗口的整个高度，而 Firefox 会将 body 元素折叠成一行。我相信 body 折叠是正确的行为，因为“块”元素（例如 <body> 或 <div>）只应与包含其内容所需的高度一样高（并且由于您使内部 div 绝对定位，它在计算其高度时不会考虑这一点）。

正确的解决方法取决于您的预期结果，但您可以使用document 或window 代替document.body，因为它们代表整个可视窗口，而不仅仅是实际的<body> 元素。

您还可以将身体设置为特定高度，例如 100%。或者，一旦您将更多内容添加到正文（不是绝对定位的内容），它将“填充”并导致 mousemove 事件正常触发，因此您不需要任何这些修复。

【讨论】：

嘿，谢谢您的回答，我知道解决方法，我基本上想知道行为以及为什么将代码添加到小提琴时，chrome 的行为类似于 firefox？为什么它会改变它的行为？
好吧，正如我所提到的，这种行为是由于 Chrome 在处理元素的方式上的不同造成的。我相信 Chrome 正在对 body 元素应用非标准效果以使其成为全高。元素是一个“块”元素（它有一大堆我无法在此处描述的属性，但其中一个属性应该折叠以适应其内容）。我相信它在 jsFiddle 中没有相同的效果，因为它在 IFrame 中。 Chrome 将全高效果应用于主窗口，但不应用于 IFrame。
不是iframe的原因，查看这个链接dl.dropbox.com/u/44648654/stackoverflow/positionFixedTest/…

【解决方案2】：

除了亚历克斯的回答，我仍然对不同的行为感兴趣。我找到了解决方案：在 jsfiddle 中，您不应该在 html 中添加“body”元素。如果您删除它，那么您将获得与独立页面相同的行为。

更新：事实并非如此。真正的原因是单机页面错过了

<!DOCTYPE html>

导致 HTML 版本差异的声明。

【讨论】：

对不起，我的错误。然后我仍然不知道答案，这让我很烦恼:(
好的，在这里：jsfiddle 中有一行，将其添加到文档顶部以在独立页面中获得相同的行为：
谢谢，所以它基本上是 html5 和 html 4.01，谢谢，更新你的答案，我会支持它
抱歉垃圾邮件，但我刚刚意识到这也只是一个猜测：我没有看到你的非 jsfiddle 页面，因为这里禁用了 Dropbox 访问。我希望此时我是对的。
很高兴知道这种差异是有正当理由的，除了 Chrome 很奇怪 :) +1

【解决方案3】：

我不知道为什么，但 this 有效
在
$(document.body).mousemove(function () { 中将 document.body 替换为 document
这也适用于 Firefox。

【讨论】：

嘿，你删除了position:fixed，这也不是我想知道的，我想知道正确的行为？请再次阅读我的完整问题
@Ankur，我添加了位置：再次修复
再次请阅读我的完整问题，我知道我可以轻松地将高度 100% 添加到正文中，并且在两种浏览器中都可以使用，我想知道为什么会出现这种异常行为
可能是因为document和document.body在WebKit中是一样的，代表了整个viewport。但是在Gecko中，document.body只包含了实际的元素，document包含了整个viewport。只是猜测.
我不知道 jsfiddle 发生了什么。