如何在单击可拖动图层顶部时获得准确的指针位置？

Question

我刚刚学习 Kinetic.js，我真的很喜欢使用 HTML5 <canvas> 元素让它变得如此简单。

我有一个比“舞台”（使用动力学术语）更大的大图层，但可以拖动。拖动功能似乎以两种不同的方式干扰点击处理程序：一些单击不注册；并且在那些这样做的情况下，只有当图层处于其原始位置时，位置才是准确的。

Here's a fiddle 显示我遇到的问题。在我的实际代码中，底层实际上是一个图像。

Answer 1

http://jsfiddle.net/EKaAv/1/

layer.on ('click', function(e) {
    console.log(e);
    var mousePos = stage.getMousePosition(); // mouse position relative to stage
    var xclick = mousePos.x;
    var yclick = mousePos.y;
    var circle = new Kinetic.Circle({
        x: xclick - layer.getX(), // since position is relative to stage, adjust by layer X
        y: yclick - layer.getY(), // same as above
        radius: 25,
        fill: 'red',
        opacity: 0.5
    });
    layer.add(circle);
    stage.draw();       // redraw the stage immediately
});

任何似乎未注册的点击都是由于触发了可拖动事件，该事件会覆盖点击事件。