0

この例を見てください
。コードは次のとおりです
。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を調べたところ、本体の高さが0であるため、マウスは実際には本体上を移動していません。 Googleのクロームボディはドキュメント全体をカバーしています。

だから私の質問は：

  1. 正しい動作はどれですか？（chromeまたはfirefox）？

  2. 正しい行動はどこかに文書化されていますか？

また、驚くべきことに、このコードをjsfiddleに追加すると、chromeがfirefoxのように動作し始めましたが、誰かがこの異常な動作についても説明できますか？

編集：height:100%本文に追加することで両方のブラウザでコードを機能させることができることを知っています。ブラウザと正しい動作でこの異なる動作が発生する理由を知りたいです。

4

3 に答える 3

3

次の css を追加すると、何が起こっているかがわかります。

body { border: 1px solid red; }

理由はよくわかりませんが、Chrome は「body」要素をウィンドウの高さいっぱいにする必要があると判断しますが、Firefox は body 要素を 1 行にまとめます。「ブロック」要素（<body>またはなど<div>）は、そのコンテンツを含めるために必要な高さだけでなければならないため、ボディの折りたたみは正しい動作だと思います（そして、内側のdivを絶対配置したため、これは取り込まれませんその高さを計算する際に考慮してください）。

正しい修正は、意図した結果によって異なりますが、実際の要素 だけでなく、表示可能なウィンドウ全体を表すため、代わりにdocumentorを使用できます。windowdocument.body<body>

体を 100% などの特定の高さに設定することもできます。または、本文にコンテンツ (絶対に配置されていないもの) を追加すると、「入力」されていずれにしても mousemove イベントが適切に発生するため、これらの修正は必要ありません。

于 2013-01-09T16:24:23.030 に答える
2

アレックスの答えに加えて、私はまだ異なる動作に興味がありました。私は解決策を見つけました.jsfiddleでは、htmlに「body」要素を追加することは想定されていません。これを削除すると、スタンドアロン ページと同じ動作になります。

更新: そうではありませんでした。本当の理由は、スタンドアロン ページが

<!DOCTYPE html>

HTMLバージョンの違いを引き起こした宣言。

于 2013-01-09T17:43:46.937 に答える
0

理由はわかりませんが、これは動作します。で置き換えこれは
Firefoxでも動作します。document.bodydocument
$(document.body).mousemove(function () {

于 2013-01-09T16:04:38.000 に答える