Question

有人可以解释＆＃34;点击＆＃34;事件和＆＃34; contentClick＆＃34;活动？

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

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

//Both events get fired equally

我已经注意到＆＃34; contentClick＆＃34;似乎只在舞台上工作：

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

...和＆＃34; contentClick＆＃34;不能与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");
})

除了这些差异之外，究竟是什么IS＆＃34; contentClick＆＃34;它通常用于什么？

谢谢！

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);
});

其他事件（没有＆＃39;内容＆＃39;前缀）会在Kinetic Node事件中触发。看一下demo：http://jsbin.com/pomemo/1/edit

尝试点击图片。您将在控制台contentClick中看到两个事件（从canvas元素冒泡）和click（＆＃34; bubled＆＃34;来自Kinetic.Image）。然后尝试点击空白区域。您只会看到一个事件contentClick而没有click事件（因为您没有点击任何Kinetic.Node）

Answer 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();

}

在KineticJS中，＆＃34; click＆＃34;之间有什么区别？事件和＆＃34; contentClick＆＃34;事件？

2 个答案: