javascript - HTML 图像 onmouseover 事件未触发

Question

我有一个正在 HTML5 Canvas 上显示的图像，我向其中添加了一个 onmouseover 事件，理论上该事件应该调用已在同一文件中编写的 JavaScript 函数。

但是，当我查看页面并将光标悬停在图像上时，没有任何反应。

我已使用以下行将图像添加到 HTML 的隐藏部分:

<img id="assetBox" src = "images/box.png" alt="Assets" onmouseover = "displayAssetDescriptionTip()"/>

然后使用以下函数将图像绘制到 Canvas 上:

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");
}

但是，由于某种原因，当我在浏览器中查看页面并将光标悬停在 Canvas 上的图像上时，没有任何反应，控制台中也没有显示任何内容...我认为这意味着我的 onmouseover 事件没有触发，但我不知道为什么会这样 - 谁能向我解释一下，并指出我需要做什么才能正确执行？

编辑 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);

我知道我必须编写代码来告诉脚本实际如何处理坐标，但我只是想先尝试一下，因为我自己已经有一段时间没有对坐标进行任何处理了。但是当我在浏览器中查看该页面时，我收到一个控制台错误，指出“ Canvas 未定义，并提示该行:

var boundingBox = canvas.getBoundingClientRect();

我想知道这是否是因为这是一个单独的脚本文件，并且在我刚刚添加它之前实际上没有任何对我正在使用的 Canvas 的引用。我是否需要再次定义它，即使它已经在运行此脚本的 HTML 页面中定义了？

Answer 1

仅仅绘制图像并不会神奇地使图像表现得像节点一样。例如，您无法更改其 src 并让它自动更改 Canvas 上显示的图像。

相反，您必须在 Canvas 上使用 onmousemove 手动跟踪鼠标移动，然后计算鼠标悬停的位置并对其进行处理。拥有在 Game Maker 中制作菜单的经验，我可以告诉你这非常困难!