jQuery确定div中的鼠标位置

Question

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

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

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

我已经设置了一个jsfiddle here

$('.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/