javascript - HTML5 Multiple Canvases 事件监听器 - 如何确定哪个 Canvas 经历了事件？

Question

我是 JS 新手。我没有使用 jQuery，我有一个问题。我在页面上创建了数量可变的 Canvas ，所有 Canvas 都有一个事件监听器，如下所示:

            for (i=0; i<numberOfCanvases; i++){
                var canv =  document.createElement("canvas");
                canv.addEventListener('click', clickReporter, false);
                document.body.appendChild(canv); }

给定监听函数clickReporter:

        function clickReporter(e){...}

我正在尝试使用此函数来告诉我单击事件相对于 Canvas 的鼠标位置:

function getMousePos(canvas, evt){
// get canvas position
var obj = canvas;
var top = 0;
var left = 0;
while (obj && obj.tagName != 'BODY') {
    top += obj.offsetTop;
    left += obj.offsetLeft;
    obj = obj.offsetParent;
}
// return relative mouse position
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;
return {
    x: mouseX,
    y: mouseY
};

这是我从本教程中找到的:http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

问题是，它假定只有一个 Canvas ，而我现在确实有一个放置在网页上的 Canvas 列表，但我想知道，如果只给出 clickReporter() 函数，是否有一种简单的方法确定选择了哪个 Canvas ？像 evt.getCanvas() 或 evt.getParentCanvas() 这样的函数？

我问是因为当一个事件发生时(鼠标点击许多 Canvas 之一，我想在那个位置只为那个 Canvas 创建 Action )

Answer 1

function clickReporter(e){
    console.log( this ); // in a eventListener , this point to the element fire the event
    console.log( e.target ); // in fireFox and webkit, e.target point to the element fire the event
}