Question

嘿所有我想要在我的画布上添加一个监听器，以便查看用户点击了哪个图像。

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

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

但是，如果我上面只有一张图片，那么我不想创建一个 zzzz.on（＆＃39;点击＆＃39;，... 为< em>每个图像。

我注意到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。您的addEventListener不属于DOM。

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()); } });：

{{1}}

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

Konva addEventListener单击以显示多个图像

1 个答案: