在 KineticJS 中，“click”事件和“contentClick”事件有什么区别？答案

【问题标题】：In KineticJS, what is the difference between the "click" event and the "contentClick" event?在 KineticJS 中，“click”事件和“contentClick”事件有什么区别？
【发布时间】：2014-09-27 06:31:51
【问题描述】：

谁能解释一下“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”究竟是什么，它通常用于什么？

谢谢！

【问题讨论】：

标签： javascript events kineticjs

【解决方案1】：

任何contentEvent 都会在 DOM 元素上的事件上触发。 callback 的第一个参数是特殊的 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（从画布元素冒泡）和click（从 Kinetic.Image 中“冒泡”）中看到两个事件。然后尝试单击空白区域。您将只看到一个事件contentClick 而没有click 事件（因为您没有点击任何 Kinetic.Node）

【讨论】：

好的，我明白了！谢谢。
有什么办法可以在图像上的“click”事件触发后取消 contentClick 事件？
需要了解你的目的。为什么需要它？
当然，而且可能有更好的方法。我只需要舞台上的“点击”事件，但我不希望它在节点上被触发。目前“contentClick”会为舞台+节点触发，而“click”在舞台的空白区域根本不会触发。

【解决方案2】：

我注意到，当事件在特定节点上触发时，事件中的 targetNode 值设置为该节点....当仅通过单击舞台触发事件时，则未设置 targetNode事件。

所以，我设置我的处理程序来测试 targetNode 的存在：

UIUtils_stageClick = function(event){
// unselect anything, only if we did not click on a card.... clicking on the table background only
if (!event.targetNode) {
    voidFunctions_clearSelection();
}
    // hide any error message flag or card label tag
    UIUtils_hideErrorToolTip();
    UIUtils_hideCardToolTip();
    window.game.stage.draw();

}

【讨论】：