当没有周围元素时,在画布中跟踪鼠标位置

Question

我在使用画布获取鼠标位置时遇到了麻烦.

有两种情况:

1)如果画布div周围没有div元素,那么我就可以获得鼠标位置.

2)当画布被包裹在div当时offsetLeft并且offsetTop不能按预期工作时

这种差异的原因是什么？

Answer 1

你需要一个函数来获取canvas元素的位置:

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

并计算光标相对于该位置的当前位置:

$('#canvas').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coordinateDisplay = "x=" + x + ", y=" + y;
    writeCoordinateDisplay(coordinateDisplay);
});

的值offsetLeft和offsetTop相对于offsetParent,这是你的div节点.当你删除div它们相对于它时body,所以没有减去的偏移量.

类似,e.pageX并e.pageY给出光标相对于文档的位置.这就是为什么我们从这些值中减去画布的偏移量以达到真正的位置.

一种替代定位的元件是直接使用的值e.layerX和e.layerY.这不如上述方法可靠,原因有两个:

1. 当事件不在定位元素内发生时,这些值也相对于整个文档
2. 它们不属于任何标准