代码之家 › 专栏 › 技术社区 › cdarwin

如何调试Konva stage不响应click事件

konvajs javascript

0

cdarwin · 技术社区 · 7 年前

我有一个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);

1 回复 | 直到 7 年前

1

0

Vanquished Wombat 7 年前

下面的代码片段是根据您的代码构建的。在这个简单的例子中,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>