javascript - 如何在动力学js中分别使用可拖动和单击？

Question

如何使用可拖动并单击 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

您需要检测拖动状态。埃斯：

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 上的点击，您可能会遇到在完成对形状的拖动后，会触发舞台上的 click 事件。

我建议在dragstart中将控制变量设置为“true” ；然后，检查触发的点击事件内的变量，将其设置为“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...
})