Question

我有一个Konva阶段，其定义如下例所示，该阶段没有响应单击，即使它响应拖动并已自动拖动。

有没有一种方法可以解决点击问题？

舞台上有一层，上面有一些不能完全覆盖舞台的物体。

this.stage = new Konva.Stage({
    container: divName,
    width: this.width,
    height: this.height,
    draggable: true
 });


this.stage.on("click mousedown", function() {
    console.log("click");
});

this.stage.on("dragstart", function() {
    console.log("dragstart");
});


this.nodeLayer = new Konva.Layer();

this.stage.add(this.nodeLayer);

Answer 1

下面的代码段是根据您的代码构建的。在这个简单的示例中，单击似乎有效。您可以发布更多代码吗？

var divName = 'container1';
var width = 300;
var height = 200;

this.stage = new Konva.Stage({
    container: divName,
    width: width,
    height: height,
    draggable: true
 });


this.stage.on("click mousedown", function() {
    console.log("click - stage");
});

this.stage.on("dragstart", function() {
    console.log("dragstart - stage");
});


this.nodeLayer = new Konva.Layer();

this.nodeLayer.on("click mousedown", function() {
    console.log("click - layer");
});

this.nodeLayer.on("dragstart", function() {
    console.log("dragstart - layer");
});



this.stage.add(this.nodeLayer);

var layer = nodeLayer; 
$('#addshape').on('click', function(){
var rect = new Konva.Rect({ x: 10, y: 10, width: 50, height: 50, fill: 'cyan'});
layer.add(rect)
layer.draw();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<p>Click the canvas first - note the 'click - stage' event fires but no 'click - layer'. Now add a shape and click it - note the layer click occurs before the stage click.</p> 
<button style='position: absolute; z-index: 10;' id='addshape'>Add shape</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>

如何调试Konva舞台不响应点击事件

1 个答案: