Javascript 我的合作伙伴是楠，楠

我试图在画布上获得鼠标位置的坐标。但我得到的只是楠，楠

var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');

var mouseX;
var mouseY;

canvasBg.addEventListener('mousemove', mouseMoved, false);
canvasBg.addEventListener('click', mouseClicked, false);

function mouseMoved(e) {

mouseX = e.pageX - canvasBg.pageOffsetLeft;
mouseY = e.pageY - canvasBg.pageOffsetTop;
document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;

}

function mouseClicked(e) {

    alert( mouseX + "," + mouseY);

}

---

您可以采用更简单的方法：

function mouseMoved(e) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
    document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;
}

function mouseClicked(e) {
    alert( e.offsetX + "," + e.offsetY);
}

---

这是另一个解决方案

为您的

mouseMoved

功能尝试以下操作：

function mouseMoved(e) {
    mouseX = e.x - canvasBg.offsetLeft;
    mouseY = e.y - canvasBg.offsetTop;

    document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;
}

完整代码的实时预览：

---

要回答原始代码不起作用的原因，pageOffsetLeft和pageOffsetTop不存在。当你试图从一个数字中减去未定义的数字时，你得到的（适当地）不是一个数字。