Question

我正在制作“游戏”，用户可以在点击图层时创建新圈子，但在点击之前创建的圈子时可以看到提醒。问题是我无法停止创建圈子，因为舞台onclick事件总是被触发。

我有一个舞台，它的onclick事件负责创建圆圈。我尝试使用e.target来知道点击是否在元素上，但它不起作用：

/*STAGE*/
var stage = new Kinetic.Stage({
    container: 'container',
    width: (window.innerWidth / 100) * 80, 
    height: 200
});
stage.on('click', function(e) {
    if(e.target !== Kinetic.Circle)
        createMarker();
});

然后我有一层：

/*LAYER*/
var layer = new Kinetic.Layer();
layer.add( new Kinetic.Rect({
    x: 0,
    y: 0,
    width: stage.width(), //full width
    height: stage.height(), //full height
    fill: 'yellow', //background color
}));
stage.add(layer);

最后创建标记，其onclick事件正常工作：

/*MARKERS CREATION*/
var createMarker = function(){
    var marker = new Kinetic.Circle({
        x: stage.getPointerPosition().x,
        y: stage.getPointerPosition().y,
        radius: 20,
        fill: 'red',
        draggable: true
    });
   marker.on('click', function() {
        alert("You clicked me!");
    });
   layer.add(marker);
   layer.draw();
}

那么，问题是如何识别执行（或不执行）某个操作的目标？提前谢谢，

http://jsfiddle.net/gal007/xzwohvy9/6/

Answer 1

e.target的类型为object，Kinetic.Circle的类型为function，这就是为什么

e.target !== Kinetic.Circle

始终返回true并调用createMarker()。

将条件替换为

e.target.className !== 'Circle'

会奏效。

根据“onclick-event target”创建形状

1 个答案: