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