1

嘿，我想在我的画布上添加一个侦听器，以便查看用户单击了哪个图像。

目前我有以下代码（它工作得很好）：

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

但是，如果我有不止一个图像，那么我不想为那里的每个图像创建一个zzzz.on('click',... 。

我注意到 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以便在我仅单击图像时触发？

4

1 回答 1

1

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

addEventListener只是on方法的别名。

要解决您的任务，您可以使用事件冒泡。click您可以在整个舞台上聆听：

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/

于 2015-10-06T03:14:01.140 回答