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

Question

我试图从鼠标侦听器中捕获鼠标坐标，但它们未进入未定义状态。鼠标监听器被添加到Canvas，并且监听器正在触发onMouseMove函数，但传递的事件似乎没有任何定义的鼠标位置的x或y坐标。

我已经试过以下变量：event.pageX，event.pageY，event.clientX，event.clientY，event.x，对我做错误地原因是什么event.y

任何想法鼠标坐标进入undefined？谢谢你的帮助！

<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> 

Answer 1

至少，mouseMove事件处理函数中的错误。在处理程序的第二个参数中传输事件对象

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