Отслеживание положения мыши в холсте, когда не существует окружающего элемента

У меня возникают проблемы с получением положения мыши w.r.t canvas.

1) Если есть элемент div, окружающий div div, тогда я смог получить положение мыши.

2) Когда холст обернут в div, тогда offsetLeft и offsetTop работают не так, как ожидалось

Ответы

Ответ 1

Вам нужна функция, чтобы получить позицию элемента холста:

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 node. Когда вы удаляете div, они относятся к body, поэтому смещения нет.

Similary, e.pageX и e.pageY указывают положение курсора относительно документа. Поэтому мы вычитаем смещение холста из этих значений, чтобы достичь истинного положения.

Альтернативой для позиционированных элементов является непосредственное использование значений e.layerX и e.layerY. Это менее надежно, чем метод выше по двум причинам:

Эти значения также относятся ко всему документу, когда событие не происходит внутри позиционированного элемента
Они не являются частью стандартного