In KineticJS, what is the difference between the "click" event and the "contentClick" event?

Question

Can someone explain the difference between the "click" event and the "contentClick" event ?

stage.on("contentClick", function(e) {
    console.log("stage contentClick");
})

stage.on("click", function(e) {
    console.log("stage click");
})

//Both events get fired equally

I've already noticed that "contentClick" seems to work on the stage only :

rect.on("contentClick", function(e) {
    //This never gets fired
    console.log("rect contentClick");
})

... and "contentClick" doesn't play well with cancelBubble :

rect.on("click", function(e) {
    console.log("rect click");
    e.cancelBubble = true;
})

stage.on("contentClick", function(e) {
    //This fires even though cancelBubble should prevent it
    console.log("stage contentClick");
})

Apart from these differences, what exactly IS "contentClick" and what is it usually used for ?

Thanks !

Answer 1

Any contentEvent will fired on events on DOM element. First argument of callback is special Kinetic event object, you can access to native DOM event object via evt property (for v.5.1.0):

stage.on("contentClick", function(e) {
  var nativeEvent = e.evt;
  console.log("stage contentClick", e);
});

Other events (with no 'content' prefix) are fired on Kinetic Node events. Look at demo: http://jsbin.com/pomemo/1/edit

Try to click on image. You will see two events in console contentClick (bubbled from canvas element) and click ("bubled" from Kinetic.Image). Then try to click on empty space. You will see only one event contentClick and no click event (because you didn't click on any Kinetic.Node)