Detecting a Click on Stage but not on Shape in Kin

Question

In KineticJS, how do you detect a Click event where the click occurs outside an object/shape?

I am trying to get a Rect to change its scale to 2 when a user clicks on it, and return back to a scale of 1 when the user clicks anywhere outside it.

JSfiddle: http://jsfiddle.net/ABTAD/8/

Managed to detect a click on stage, but clicking on the Rect also fires the click handler!!! And somehow the .setScale(1) does not do anything, while console.log printes something out. How can I prevent the click handler from firing when the click is made on the Rect instead of the empty stage?

JS Code to detect click on stage

window.stage.getContainer().addEventListener('click', function(e) {
    $.each(window.layer.get('.box'), function(index, box) {
       box.setScale(1);
       console.log('clicked on stage');
    });
});

Answer 1

you can access the stage content wrapper with stage.getContent(). From there, you can add an event handler like this:

stage.getContent().addEventListener('click', ...); // regular javascript

or

$(stage.getContent()).on('click', ...); // jquery