使用Javascript将鼠标单击坐标插入文本输入框

我的页面上有一个HTML5画布和两个文本输入字段。当用户单击画布（并且仅在画布内）时，我希望将鼠标坐标回显到页面上的文本输入框中。帮助？？如果您需要更多详细信息，请询问

我在下面的评论中找到了这个链接，但似乎无法使它正常工作：

文本输入：

<input type="number" name="MouseX" id="text_x" min="10" max="600" />

 <input type="number" name="MouseY" id="text_y" min="0" max="480" />

Javascript:

<script>
function relMouseCoords(event){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;

    do{
        totalOffsetX += currentElement.offsetLeft;
        totalOffsetY += currentElement.offsetTop;
    }
    while(currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;

    return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
coords = canvas.relMouseCoords(event);
document.Show.MouseX.value = coords.x;
document.Show.MouseY.value = coords.y;

</script>

函数relMouseCoords（事件）{
var totalOffsetX=0；
var totalOffsetY=0；
var canvasX=0；
var-canvasY=0；
var currentElement=此；
做{
totalOffsetX+=currentElement.offsetLeft；
totalOffsetY+=currentElement.Offsetop；
}
while（currentElement=currentElement.offsetParent）
canvasX=event.pageX-totalOffsetX；
canvasY=event.pageY-totalOffsetY；
返回{x:canvasX，y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords=relMouseCoords；
coords=canvas.relMouseCoords（事件）；
document.Show.MouseX.value=coords.x；
document.Show.MouseY.value=coords.y；

更新以下是适用于我的代码： HTML:

很遗憾，我们的网站目前不支持您的浏览器
应用给您带来不便，我们深表歉意

和JS：

<script language="JavaScript">
// Get mouse click coordinates within canvas element
function point_it(event){
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("canvasContainer").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("canvasContainer").offsetTop;
    document.getElementById("canvas").style.left = (pos_x-1) ;
    document.getElementById("canvas").style.top = (pos_y-15) ;
    document.getElementById("canvas").style.visibility = "visible" ;
    document.getElementById("text_x").value = pos_x;
    document.getElementById("text_y").value = pos_y;
}
</script>

//获取canvas元素中的鼠标单击坐标
功能点_it（事件）{
pos_x=event.offsetX？（event.offsetX）：event.pageX document.getElementById（“canvasContainer”）.offsetLeft；
pos_y=event.offsetY？（event.offsetY）：event.pageY document.getElementById（“canvasContainer”）.offsetTop；
document.getElementById（“canvas”）.style.left=（位置x-1）；
document.getElementById（“canvas”）.style.top=（pos_y-15）；
document.getElementById（“画布”）.style.visibility=“可见”；
document.getElementById（“text_x”）.value=pos_x；
document.getElementById（“text_y”）.value=pos_y；
}

您需要添加一个click事件，并使用事件参数调用函数

document.getElementById("canvas").onclick = function(event) {
    var coords = canvas.relMouseCoords(event);
    document.getElementById("text_x").value = coords.x;
    document.getElementById("text_y").value = coords.y;
}​​

---

您需要添加一个click事件，并使用事件参数调用函数

document.getElementById("canvas").onclick = function(event) {
    var coords = canvas.relMouseCoords(event);
    document.getElementById("text_x").value = coords.x;
    document.getElementById("text_y").value = coords.y;
}​​

---

您想要鼠标相对于画布或文档的坐标吗？您可以在中找到与您想要的非常相似的东西，但不使用HTML5画布。@JoshLee我找到了这个，如果您向下滚动到画布示例，它们会显示坐标。我什么都没试过，因为我不知道去哪里start@j08691我想要鼠标相对于画布的坐标。例如，0,0将是画布的左上角。您希望鼠标坐标相对于画布或文档的位置可能重复？您可以在中找到与所需位置非常相似的位置，但不使用HTML5画布。@JoshLee我发现了这一点，如果您向下滚动到画布示例，它们将显示坐标。我什么都没试过，因为我不知道去哪里start@j08691我想要鼠标相对于画布的坐标。例如，0,0将是画布的左上角。我实际使用的代码可能有点不同，但设置类似。我更新了顶部的问题以包含我的最终代码。你能检查一下以确保没有任何错误吗？还有，有没有办法只在canvas元素中注册一次点击？@adamdehaven没有错误，但这很容易出现错误。不要使用你的代码，使用我给你的代码，它会保证你总是得到正确的坐标。我的示例演示了如何仅使用canvas元素注册单击。当我使用您的代码时，它在JSFIDLE中运行良好，但不会更新实际站点上的文本输入框？你能用我在顶部的内容（意思是使用我的输入名等）发布完整的代码吗@adamdehaven我在使用你的输入名。唯一的区别是我删除了max/min并将类型更改为“text”。我已经将输入的类型改回“number”，它仍然有效。实际上，我使用的代码与此稍有不同，但设置类似。我更新了顶部的问题以包含我的最终代码。你能检查一下以确保没有任何错误吗？还有，有没有办法只在canvas元素中注册一次点击？@adamdehaven没有错误，但这很容易出现错误。不要使用你的代码，使用我给你的代码，它会保证你总是得到正确的坐标。我的示例演示了如何仅使用canvas元素注册单击。当我使用您的代码时，它在JSFIDLE中运行良好，但不会更新实际站点上的文本输入框？你能用我在顶部的内容（意思是使用我的输入名等）发布完整的代码吗@adamdehaven我在使用你的输入名。唯一的区别是我删除了max/min并将类型更改为“text”。我已经将输入的类型改回“number”，它仍然有效