3

我是 JS 新手。我没有使用 jQuery，我有一个问题。我在页面上创建了可变数量的画布，都有一个像这样的事件监听器：

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

给定监听函数 clickReporter：

        function clickReporter(e){...}

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

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/

问题是，它假设只有一个画布，并且我现在确实有一个放置在网页上的画布列表，但我想知道，仅给出 clickReporter() 函数，是否有一种简单的方法来确定哪个画布被选中？像 evt.getCanvas() 或 evt.getParentCanvas() 这样的函数？

我问是因为当事件发生时（鼠标单击许多画布中的一个，我想在该位置仅为该画布创建动作）

4

2 回答 2

2 
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
}
于 2012-05-09T01:00:40.173 回答
1

我认为 evt.target ( event.target ) 会起作用。

于 2012-05-09T00:55:26.630 回答