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 不同的参考点（与浏览器的左上角不同）。

实际上，绝对定位元素是指第一个参考父元素。如果没有找到引用父级，则最终引用父级是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 回答