javascript - 在KineticJS中， "click"事件和 "contentClick"事件有什么区别？

Question

有人可以解释一下“click”事件和“contentClick”事件之间的区别吗？

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

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

//Both events get fired equally

我已经注意到“contentClick”似乎只在舞台上起作用:

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

...并且“contentClick”与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");
})

除了这些差异之外，“contentClick”到底是什么以及它通常用于什么？

谢谢!

Answer 1

任何 contentEvent 都会在 DOM 元素上的事件上触发。回调的第一个参数是特殊的 Kinetic 事件对象，您可以通过 evt 属性访问原生 DOM 事件对象(适用于 v.5.1.0):

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

其他事件(没有“内容”前缀)在动力学节点事件上触发。看演示:http://jsbin.com/pomemo/1/edit

尝试单击图像。您将在控制台 contentClick(从 canvas 元素冒泡)和 click(从 Kinetic.Image“冒泡”)中看到两个事件。然后尝试单击空白区域。您将仅看到一个事件 contentClick，而不会看到 click 事件(因为您没有单击任何 Kinetic.Node)