javascript - jQuery确定div内的鼠标位置

Question

这可能是一个重复的问题，但我还没有看到适合我的解决方案

我的问题是如何在 div 中获取鼠标位置？

我不希望将文档作为原点，而是将内部 div（粉红色内容 div）作为原点，所以当我将游标移动到粉红色 div 的 (0|0) 坐标时，我还想要 (0|0) 坐标作为我的原点坐标

我在这里设置了一个jsfiddle

$('.content').mousemove(function(e){
    $('#xCoord').val(e.pageX);
    $('#yCoord').val(e.pageY);
});

这对我来说真的不起作用......我也试过了

var parentOffset = $(this).parent().offset();

但我只得到一个 8px 的偏移量，并且 jQuery mousemove 偏移量是未定义的

谁能帮我 ？

Answer 1

e.pageX返回引用窗口的当前鼠标位置。

尝试这个：

var mouseX = e.pageX - $(this).offset().left;
var mouseY = e.pageY - $(this).offset().top;

更新小提琴：http: //jsfiddle.net/B7zZ8/2/

Answer 2

您的位置是实际位置 - div 位置：

$('.content').mousemove(function(e){
        var pos=$(this).position();
        $('#xCoord').val(e.pageX-pos.left);
        $('#yCoord').val(e.pageY-pos.top);
    });

http://jsfiddle.net/B7zZ8/3/