kineticjs how to trap a click event on blank area of layer

Question

I have a layer in which I have any number of shapes. If I click any shape then that shape is toggled between selected an unselected. If "selected" a properties palette is populated providing ability to change selected shape's attributes. All this works well. I'm trying to add a feature if you click any blank area of the layer the "selected" shape will toggle off.

I've tryed the code below, but the "click" event does not fire when a blank area of the layer is clicked.

layer.on('click', function() {  
toggleoff();       
  }); 

Any Thoughts

Answer 1

You can listen for clicks on the stage like this: http://jsfiddle.net/m1erickson/6CLA8/

var clickcount=0;

$(stage.getContent()).on('click', function (event) {
    console.log(++clickcount));
});

Answer 2

You could add a background rectangle to that layer, and bind the click event to the rectangle

var layer = new Kinetic.Layer();
var bg = new Kinetic.Rect({
    width: stage.getWidth(),
    height: stage.getHeight(),
    x: 0,
    y: 0
});
layer.add(bg);
stage.add(layer);

then, bind the event that you want:

bg.on('click', function() {
    alert("clicked!");
})