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

Question

我试图在单击鼠标时将 div 放置在光标所在的位置。因此，当我使用 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不同的引用点(与浏览器的左上角不同)。

事实上，绝对定位元素引用第一个引用父元素。如果未找到引用父级，则最终引用父级为 body。可能您有一个具有 CSS 属性的中间元素:position:relative。此 CSS 属性使元素成为定位的引用并引起移动。