Как отладить этап Konva, не реагирующий на событие клика

У меня есть этап 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);

javascript konvajs
person cdarwin    schedule 19.11.2018    source источник
comment
Вы видели мой ответ? Может быть, у вас есть что-то еще в вашем коде, который перехватывает клики?   -  person Vanquished Wombat    schedule 20.11.2018

Ответы (1)


arrow_upward
0
arrow_downward

Фрагмент ниже создан из вашего кода. Щелчок работает в этом простом примере. Не могли бы вы опубликовать больше своего кода?

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>

person Vanquished Wombat    schedule 20.11.2018
comment
Привет, извини, но я был занят. Мой код в настоящее время довольно сложен, и трудно извлечь лучший образец. Однако у меня есть просто div, содержащий холст, и действительно, теперь я использовал - как обходной путь - div для перехвата щелчка. Спасибо за ответ. - person cdarwin; 20.11.2018
comment
ок ценю это. Похоже, в конструкции вашего DOM или содержимого холста есть что-то, что в первую очередь улавливает клики. Без продолжения мы немного застряли, давая ответ. Извини. Если ответ прояснил ситуацию, показав вам, как отлаживать ваши клики, пожалуйста, отметьте его как правильный, чтобы другие читатели в будущем могли оценить актуальность своих ситуаций. - person Vanquished Wombat; 20.11.2018