mousemove 抓取嵌套元素的 XY 偏移量

Question

我正在尝试获取鼠标在父元素中的 XY 位置。这部分很简单，让我失望的是当有一个嵌套元素时，它会在该嵌套元素中抓取鼠标的 XY 位置。

我用一个非常简单的例子创建了一个 JS Fiddle：http://jsfiddle.net/htenchwv/

你可以看到我是如何用这个来拉位置的

$(".parent").mousemove(function(event){
    $(".debug").html("X: "+ event.offsetX +"<br>Y: "+ event.offsetY);
});

您可以在 X 或 Y 位置看到，当您移动到子元素时，数字会向下跳。我不知道为什么或如何防止这种行为并仅在父元素中收集 XY 鼠标

Answer 1

您可以使用客户端 X 和 Y，结合 .offset()

Updated demo

$(document).ready(function($){
    $(".parent").mousemove(function(event){
        var pOffset = $(".parent").offset(),
            px = event.clientX - pOffset.left,
            py = event.clientY - pOffset.top;
        $(".debug").html("X: "+ px +"<br>Y: "+ py);
    });
});

HTH

-泰德