如何调试不响应点击事件的 Konva 阶段

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

下面的 sn-p 是根据您的代码构建的。 Click 似乎在这个简单的例子中工作。你能发布更多你的代码吗？

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>