Я пытаюсь взять координаты мыши из прослушивателя мыши, но они не определены. Слушатель мыши добавляется в Canvas, и слушатель запускает функцию onMouseMove, однако переданное событие, похоже, не имеет определенных координат x или y для позиции мыши.
Я пробовал следующие переменные: event.pageX, event.pageY, event.clientX, event.clientY, event.x, event.y
Любые идеи о том, что я делаю неправильно, чтобы привести координаты мыши к неопределенным? Спасибо за любую помощь!
<script>
var boxes;
var canvas;
var context;
$(document).ready(function() {
canvas = document.getElementById("requirement_tree");
context = canvas.getContext("2d");
// Add mouse listener
canvas.addEventListener("mousemove", onMouseMove, false);
});
// Get the current position of the mouse within the provided canvas
function getMousePos(event) {
var rect = canvas.getBoundingClientRect();
if (event.pageX != undefined && event.pageY != undefined) {
x = event.pageX;
y = event.pageY;
} else {
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
console.log("X:" + x);
console.log("Y:" + y);
return {
X: x - rect.left,
Y: y - rect.top
};
}
function onMouseMove(event) {
var mousePos = getMousePos(canvas, event);
var message = 'Mouse position: ' + mousePos.X + ',' + mousePos.Y;
context.font = '10pt Arial'
context.fillStyle = 'black';
context.textAlign = 'left';
context.clearRect(0, 0, 200, 200);
context.fillText(message, 100, 100);
}
</script>
По крайней мере, ошибка в обработчике события mouseMove. Объект события передается во втором аргументе обработчика.
// ...
// Get the current position of the mouse within the provided canvas
function getMousePos(element, event) {
var rect = canvas.getBoundingClientRect();
// ...
var rect = element.getBoundingClientRect();
или первый параметр будет бессмысленным.