HTML5 画布鼠标侦听器坐标未定义

HTML5 Canvas Mouse Listener Coordinates Undefined

本文关键字：侦听器 坐标 未定义 鼠标 布鼠标 HTML5      更新时间：2023-09-26

我试图从鼠标侦听器获取鼠标坐标，但它们未定义。鼠标侦听器正在添加到画布中，侦听器正在触发 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>

至少，鼠标移动事件的处理程序出错。在处理程序的第二个参数中传输的事件对象。

// ...
// Get the current position of the mouse within the provided canvas
function getMousePos(element, event) {
    var rect = canvas.getBoundingClientRect();
// ...
相关文章：