【发布时间】：2013-02-20 15:57:19
【问题描述】：
我有一张显示在 HTML5 画布上的图像，我在其中添加了一个 onmouseover 事件，理论上应该调用已写入同一文件的 JavaScript 函数。
但是，当我查看我的页面并将光标悬停在图像上时，没有任何反应。
我已使用以下行将图像添加到我的 HTML 的隐藏部分：
<img id="assetBox" src = "images/box.png" alt="Assets" onmouseover = "displayAssetDescriptionTip()"/>
然后使用以下函数将图像绘制到画布上：
function drawDescriptionBoxes(){
var assetsDescriptionBox = document.getElementById("assetBox");
var liabilitiesDescriptionBox = document.getElementById("liabilitiesBox");
var incomeDescriptionBox = document.getElementById("incomeBox");
var expenditureDescriptionBox = document.getElementById("expenditureBox");
assetsDescriptionBox.src = 'images/box.png';
liabilitiesDescriptionBox.src = 'images/box.png';
incomeDescriptionBox.src = 'images/box.png';
expenditureDescriptionBox.src = 'images/box.png';
context.drawImage(assetsDescriptionBox, 70, 400, 120, 70);
context.drawImage(liabilitiesDescriptionBox, 300, 400, 120, 70);
context.drawImage(incomeDescriptionBox, 530, 400, 120, 70);
context.drawImage(expenditureDescriptionBox, 760, 400, 120, 70);
context.strokeText("Assets", 100, 490);
context.strokeText("Liabilities", 325, 490);
context.strokeText("Income", 550, 490);
context.strokeText("Expenditure", 775, 490);
}
当检测到光标悬停在图像上时我想要调用的函数是：
function displayAssetDescriptionTip(){
document.getElementById('tipsParagraph').innerHTML = "Assets are items that can be bought or sold for cash.";
console.log("displayAssetDescriptionTip being called");
}
但是，由于某种原因，当我在浏览器中查看我的页面并将光标悬停在画布上的图像上时，什么也没有发生，控制台中也没有显示任何内容......我认为这意味着我的 @ 987654325@ 事件没有触发，但我不知道为什么会这样 - 谁能向我解释一下，并指出我需要做些什么才能让它正确？
编辑 22/02/2013 @ 14:40
我尝试添加以下 JS 来跟踪我拥有的单独 JS 文件之一中的鼠标坐标：
/*Add code to keep track of the mouse coordinates */
var boundingBox = canvas.getBoundingClientRect();
var mousex = (mouse_event.clientX-boundingBox.left)*(canvas.width/boundingBox.width);
var mouseY = (mouse_event.clientY-boundingBox.top)*(canvas.height/boundingBox.height);
我知道我必须编写代码来告诉脚本实际如何处理坐标，但我只是想先尝试一下，因为我已经有一段时间没有自己处理坐标了.但是当我在浏览器中查看该页面时，我收到一个控制台错误，提示“未定义画布，并抱怨以下行：
var boundingBox = canvas.getBoundingClientRect();
我想知道这是不是因为这是一个单独的脚本文件，并且在我刚刚添加它之前实际上并没有对我正在使用的画布有任何引用。我是否需要再次定义它，即使它已经在运行此脚本的 HTML 页面中定义？
【问题讨论】：
-
如果你看，这里的每个人都正确回答了这个问题。你现在必须退后一步，试着去理解它。有时起床做点别的事，然后回来做这件事，因为我们所有人都陷入了一段时间的思维定势，做些别的事情可以让我们摆脱它。
-
只是对您将来遇到的问题的提示。你问了很多人，他们都回答了。您没有检查任何人的答案或赞成或反对票。您应该参与这方面的工作，以尊重您收到的帮助，无论是负面反馈还是正面反馈。
-
您好，非常感谢大家的回复，并尝试了他们的建议。但是，建议的答案都没有真正解决我遇到的问题-因此为什么我没有“接受”它们，而是对答案进行了评论以进一步澄清事情，希望我能够解决解决方案。
-
对，但事情就是这样。您遇到的真正问题是不了解如何在附加事件方面在画布上绘制图像时对其进行操作。如果您通过像 raphael.js 一样简化它的库来了解如何做到这一点，您实际上会解决它。
-
我已经在我的画布上使用了 KineticJS 库 - 使一些图像可拖动，虽然不是我想要附加 onmouseover 事件的图像 - 但我想使用这两个库不会对游戏性能有负面影响？
标签： javascript html image onmouseover