Konva addEventListener点击多张图片

Question

嘿，我想要添加一个侦听器到我的画布上，以便查看用户点击了哪个图片。

目前，我有以下代码（和它的作品就好了）：

theImg.on('click', function(evt) { 
    console.log(this.id()); 
    console.log('X: ' + this.x()); 
    console.log('Y: ' + this.y()); 
}); 

但是，如果我有不止一个图像就可以了，然后我不希望有创建ZZZZ。在（“点击”，...为每个图像上有

我注意到Konva具有的addEventListener所以我试着这样做以下：

document.getElementById('theImg').addEventListener('click', function() { 
    console.log(this.id()); 
    console.log('X: ' + this.x()); 
    console.log('Y: ' + this.y()); 
}, false); 

即使调用特定图像，它似乎也不工作？在我JSFIDDLE尝试这个，当我得到一个错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null 

因此，除了错误我得到的，我怎么也可以设置的addEventListener以断火时，我只点击了图片？

Answer 1

您不能在文档对象模型中使用document.getElementById('theImg')作为此函数搜索，而不是在虚拟Konva对象中使用。您的Konva.Image不是DOM的一部分。

addEventListener只是on方法的别名。

要解决您的任务，您可以使用事件冒泡。

stage.on('click', function(e) { 
    var node = e.target; 
    var isImage = (node.className === 'Image'); 
    if (isImage) { 
     console.log(node.id()); 
     console.log('X: ' + node.x()); 
     console.log('Y: ' + node.y()); 
    } 
}); 

http://jsfiddle.net/8jv02mL3/10/

：您可以整个舞台监听 click