Question

我有一个正在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");
}

但是，出于某种原因，当我在浏览器中查看我的页面并将光标悬停在画布上的图像上时，没有任何反应，控制台中没有显示任何内容......我认为这意味着我的{ {1}}事件没有触发，但我不知道为什么会这样 - 任何人都可以向我解释，并指出我需要做些什么才能做到正确？

编辑22/02/2013 @ 14:40

我尝试添加以下JS来跟踪我所拥有的单独JS文件中的鼠标坐标：

onmouseover

我知道我必须编写代码来告诉脚本实际上如何处理坐标，但我只是想先尝试一下，因为我已经有一段时间了，因为我已经完成了任何有关坐标的工作。但是当我在浏览器中查看该页面时，我收到一个控制台错误，指出“画布未定义，并抱怨该行：

/*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);

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

Answer 1

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

相反，您必须在画布上使用onmousemove手动跟踪鼠标移动，然后计算鼠标悬停在其上的内容并对其执行某些操作。有过在Game Maker中制作菜单的经验，我可以告诉你，这很难！[/ p>

Answer 2

这是一个假设，但绘制的图像是一个与你有onmouseover的元素不同的元素。尝试在图像中添加一个类和正在绘制的类，并在类上设置onmouseover（检查jQuery以使此过程更容易）

HTML图像onmouseover事件未触发

2 个答案: