CODEWITHSUNDEEP
kineticjs
gal007
gal007

Reputation: 7202

Creating shapes according to the "onclick-event target"

I'm creating "a game" in which the user be allowed to create new circles when clicks the layer, but to see an alert when clicks any previously created circle. The problem is I can't stop creating circles, because the stage onclick event is always triggered.

I have an stage, and its onclick event is responsible for circles creation. I tryed to use the e.target to know if the click was over an element, but it is not working:

/*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();
});

Then I have a layer:

/*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);

And finally the marker creation, with its onclick event working properly:

/*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();
}

So, the problem is how to identify the target to perform (or not) an action? Thanks in advance,

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

Upvotes: 0

Views: 152

Answers (1)

Edward Lee
Edward Lee

Reputation: 951

Type of e.target is object and type of Kinetic.Circle is function, that is why 

e.target !== Kinetic.Circle

always returns true and calls createMarker().

Replace the condition to

e.target.className !== 'Circle'

will work.

Upvotes: 1

Related Questions