Get Click event on blank part of stage

Question

I have stage inside I have 2 - 3 images. I want to perform certain operation when I click in blank part of stage. But it will not execute when I click on Images inside stage.

I have tried this one but it will not stop image click here.

$(stage.getContent()).on('click', function(e) {

                // operation to perform ...

                }); 

Pl help me if anybody knows about this. Thanks in advance

Answer 1

Your code will catch all clicks on the stage, even clicks on image nodes.

One workaround is to fill the stage with an almost transparent background rectangle before any other nodes are added.

Then listen for clicks on that background rectangle.

A Demo: http://jsfiddle.net/m1erickson/Cx44H/

var bk=new Kinetic.Rect({
    x:0,y:0,
    width:stage.width(),
    height:stage.height(),
    opacity:.01,
    stroke:"white",
});
bk.on("click",function(){
    console.log("clicked on the background");
});
layer.add(bk);