Html HTML5 画布鼠标悬停事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19055290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 canvas Mouseover event
提问by user2287474
How do I bind a mouseover or any event for that matter to a drawn object on the canvas? For instance, I tried this:
如何将鼠标悬停或任何事件绑定到画布上的绘制对象？例如，我试过这个：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
//STEP ONE
var stepOneRec = ctx.rect(20, 60, 266, 50);
ctx.stroke();
stepOneRec.addEventListener("mouseover", function() { alert('it works!'); });
On one site I looked at it showed a method using Kinetic.js. If that's the only way, I'll use it, I just assume that there's a way to bind events to drawn elements without extra plug-ins. Sorry Canvas noob. I made a fiddle with my code here: http://jsfiddle.net/jyBSZ/2/
在我查看的一个站点上，它显示了一种使用 Kinetic.js 的方法。如果这是唯一的方法，我会使用它，我只是假设有一种方法可以将事件绑定到绘制的元素而无需额外的插件。对不起画布菜鸟。我在这里使用了我的代码：http: //jsfiddle.net/jyBSZ/2/
采纳答案by Scott Mermelstein
(I started this as a posted comment, then realized it's an actual answer.)
（我一开始是发表评论，然后意识到这是一个实际的答案。）
Unfortunately, in javascript on it's own, you can't. There are no canvas objects, just the canvas as a whole, and whatever you drew on to its context. Plugins like kinetic can make objects for you, but the whole point of canvas is that the browser can think of it as a single static image.
不幸的是，在 javascript 本身中，你不能。没有画布对象，只有画布作为一个整体，以及您在其上下文中绘制的任何内容。像 kinetic 之类的插件可以为您创建对象，但画布的全部意义在于浏览器可以将其视为单个静态图像。
If you want to, you can bind mousemove events to the canvas, track its position and the position where you drew stuff, and imply on your own that it's over "that object" (effectively what the plugins do), but it's all mousemove events on a single canvas rather than mouseover events on components of it. (You could even make your event binding simulate a mouseover event for the "objects", but underneath, it's still based on checking movement and checking your own object setup.)
如果你愿意，你可以将 mousemove 事件绑定到画布，跟踪它的位置和你画东西的位置，并自己暗示它在“那个对象”上（实际上是插件所做的），但这都是 mousemove 事件在单个画布上，而不是它的组件上的鼠标悬停事件。（您甚至可以让您的事件绑定模拟“对象”的鼠标悬停事件，但在下面，它仍然基于检查移动和检查您自己的对象设置。）
回答by Rob Hardy
The objects drawn within a canvas element are not HTML elements, just pixels, and therefore will not throw DOM events the way that HTML elements would.
在 canvas 元素中绘制的对象不是 HTML 元素，只是像素，因此不会像 HTML 元素那样抛出 DOM 事件。
You would need to track the locations of your objects yourself and handle the canvas' onmousemoveevent in order to determine when the mouse is over one of your drawn objects.
您需要自己跟踪对象的位置并处理画布的onmousemove事件，以确定鼠标何时位于您绘制的对象之一上。
回答by Eugen Halca
you can use jCanvas, take a look here
你可以使用jCanvas，看看这里
i made a jsfiddle example for your problem.
我为您的问题制作了一个jsfiddle示例。
just modify next callbacks for desired result
只需修改下一个回调以获得所需的结果
function mouseOut(layer){
$("#mouse-over-text").html('none options selected');
}
function mouseIn(layer){
$("#mouse-over-text").html(getTextForId(layer.name));
}
