6

マウスをクリックしたときにカーソルがある場所にdivを配置しようとしています。したがって、e.PageX と e.pageY を使用すると、実際には div が意図したよりもはるかに下に配置されます。何か案は？

var mouseX = e.pageX;
var mouseY = e.pageY;
$("#moverdiv").css({'top':mouseY,'left':mouseX});
4

2 に答える 2

4

pageX の定義は次のとおりです。

pageX は、マウス イベントが発生したときのドキュメント全体に対するマウス ポインタの X 座標のピクセル単位の整数値です。このプロパティは、ページの水平スクロールを考慮に入れます。

この種のコードを入れると：

    $(document.body).click(function(mouseEvent) {

        $("#MyDiv").css({
            'top': mouseEvent.pageY,
            'left':mouseEvent.pageX
        });
    });

それは完全に機能します。

div が目的の位置にない場合は、DIV が本体とは異なる参照ポイント (ブラウザの左上隅とは異なる) を持っている可能性があるためです。

実際、絶対配置要素は最初の参照親を参照します。参照の親が見つからない場合、最終的な参照の親はbodyです。CSS プロパティ : position: relativeを持つ中間要素があるかもしれません。この CSS プロパティは、要素を配置の参照にし、シフトを誘発します。

于 2012-10-04T00:36:48.850 に答える
3

これは私のために働いた.これを試してください:

<!DOCTYPE html>
 <html>
   <head>
     <script src="jquery.js"></script>
     <script>
        $(document).ready(function(){
          $(document).click(function(e){ 
            var mouseX = e.pageX;
            var mouseY = e.pageY;
            $("#moverdiv").css({'top':mouseY, 'left':mouseX});
          });

        });
     </script>
     <style type="text/css">
         #moverdiv{
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #000;
            width: 100px;
            height: 100px;
           }
      </style>
   </head>
   <body>
      <div id="moverdiv"></div>
   </body>
 </html>

そしてこれがデモです

于 2012-10-04T00:36:10.530 に答える