Question

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

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

给出监听器功能clickReporter：

        function clickReporter(e){...}

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

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（）？

这样的函数

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

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
}

Answer 2

我认为evt.target（event.target）会起作用。

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

2 个答案: