如何使用可拖動並單獨在kineticjs中單擊？

Question

如何使用draggable並點擊kineticjs中的同一個節點？當使用拖動時，點擊事件也會在拖動後觸發。

中的jsfiddle，http://jsfiddle.net/matobaa/LZ5tt/

這裏是代碼...

var stage = new Kinetic.Stage({ 
    container: 'container', width: 640, height: 480 
}); 
var layer = new Kinetic.Layer(); 
var oval = new Kinetic.Ellipse({ 
    x: 100, y: 100, radius: 50, stroke: 'red', 
    draggable: true, 
}); 
oval.on('click', function(evt) { 
    alert("clicked!"); // Will not be triggered after drag 
}) 
layer.add(oval); 
stage.add(layer); 

我使用kineticjs 4.4.1。請幫忙。

Answer 1

您需要檢測拖動狀態。 ES：

var indrag = false; 
oval.on('dragstart', function(evt){ 
    indrag = true; 
}); 
oval.on('dragend', function(evt){ 
    indrag = false; 
}); 

然後：

oval.on('click', function(evt) { 
    if (!indrag){ 
     alert("clicked!"); // Will not be triggered after drag 
    } 
}) 

Answer 2

您可以通過檢查目前的情況下，通過一個變量值功能做到這一點。 的jsfiddle：http://jsfiddle.net/LZ5tt/4/

var stage = new Kinetic.Stage({ 
     container: 'container', width: 640, height: 480 
    }); 
    var layer = new Kinetic.Layer(); 
    var oval = new Kinetic.Ellipse({ 
     x: 100, y: 100, radius: 50, stroke: 'red', 
     draggable: true, 
    }); 
    var drag = false; 
    oval.on('dragstart', function(event){ 
     drag = true; 
    }); 
    oval.on('dragend', function(event){ 
     drag = false; 
    }); 
    oval.on('click', function(event) { 
     if (!drag){ 
      alert("I'm clicked!"); 
     } 
    }) 
    layer.add(oval); 
    stage.add(layer); 

Answer 3

只是一些有用的技巧爲KineticJS版本5.1.0。

如果檢測到在Kinetic Stage上發生點擊，您可能會遇到在完成對形狀的拖動後，舞臺上的點擊事件將觸發。

我所說的其實是設置一個控制變量爲「true」的的dragstart內;然後檢查觸發點擊事件中的變量，將其設置爲「false」，然後返回退出代碼塊。 通過這種方式，您不會阻止點擊事件，但在處理時不會發生任何事情。

請允許我在回答借用一些代碼上面：

var indrag = false; 

oval.on('dragstart', function(evt){ 
    indrag = true; 
}); 
oval.on('dragend', function(evt){ 

}); 

stage.on('click', function(evt) { 
    if (indrag){ 
     indrag = false; 
     return; 
    } 

    // else, it is a valid click, then do what you need to do... 
})