Question

我正在尝试在单击鼠标时将光标放在任何位置。因此，当我使用e.PageX和e.pageY时，实际上我的div远低于预期。有什么想法吗？

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

Answer 1

pageX的定义是：

pageX是鼠标事件触发时鼠标指针的X坐标相对于整个文档的整数值（以像素为单位）。此属性考虑了页面的任何水平滚动。

如果你提出这种代码：

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

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

效果很好。

如果div不在所需的位置，因为你的DIV可能有一个不同于身体的反射点（不同于浏览器的左上角）。

实际上，绝对定位元素是指第一个参考父元素。如果未找到引用父级，则最终引用父级为 body 。可能你有一个具有CSS属性的中间元素： position：relative 。此CSS属性使元素成为定位的引用并引发移位。

Answer 2

这对我有用。试试这个：

<!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>

这是demo

e.pageX和e.pageY无法正常工作？

2 个答案: