我可以将点击事件绑定到舞台并双击其中的元素吗？答案

【问题标题】：Can I bind a click event to the stage and a doubleclick to an element within it?我可以将点击事件绑定到舞台并双击其中的元素吗？
【发布时间】：2019-08-23 08:09:10
【问题描述】：

在 Konva 中，我想对舞台应用单击，但双击舞台内的形状。想知道最好的方法是什么。

最终，我想创建一个平面图，我可以在其中将表格（矩形）添加到地图中。如果我点击表格，Konva 将允许我添加一个旋转变压器。如果我在桌子外面点击，舞台上的变形金刚就会消失。我希望如果我双击表格，我可以删除那个形状。但是-似乎我既可以在舞台上单击，又可以在舞台内的元素上双击。我所拥有的代码是我所知道的最简单的示例，它说明了我对在舞台上和舞台上的元素中单击和双击的无知。

//If you click on the stage, it creates the circle. And if you click on the circle, once created, I'm hoping it will be destroyed. It doesn't seem to like clicks and doubleclicks together in one area.

stage.on('click', function (e) {
    var circle = new Konva.Circle({
        x: 100,
        y: 100,
        fill: 'blue',
        radius: 30,
        draggable: true,
        name: "circle"
    });
    layer.add(circle);
    layer.draw();
});

circle.on('dblclick', function (e) {
    this.destroy();
});

希望我可以删除这个圈子。圈子没有删除。

【问题讨论】：

标签： javascript events binding konvajs

【解决方案1】：

stage.on('click', function (e) {
  const clickedOnEmptyArea = e.target === stage;
  if (!clickedOnEmptyArea) {
    return;
  }
  var circle = new Konva.Circle({
    x: stage.getPointerPosition().x,
    y: stage.getPointerPosition().y,
    fill: 'blue',
    radius: 30,
    draggable: true,
    name: "circle"
  });
  layer.add(circle);
  layer.draw();
});

stage.on('dblclick', function (e) {
  const clickedOnEmptyArea = e.target === stage;
  if (clickedOnEmptyArea) {
    return;
  }
  e.target.destroy();
  layer.draw();
});

演示：https://jsbin.com/hogahegame/edit?html,js,output

【讨论】：