在 KineticJS 中检测舞台上的点击而不是形状上的点击答案

【问题标题】：Detecting a Click on Stage but not on Shape in KineticJS在 KineticJS 中检测舞台上的点击而不是形状上的点击
【发布时间】：2012-12-03 21:00:18
【问题描述】：

在 KineticJS 中，如何检测在对象/形状外部发生点击的 Click 事件？

我试图让Rect 在用户点击它时将其比例更改为2，并在用户点击它之外的任何地方时返回到1 的比例。

JSfiddle： http://jsfiddle.net/ABTAD/8/

设法检测到舞台上的点击，但点击Rect 也会触发点击处理程序！！！不知何故，.setScale(1) 什么都不做，而console.log 打印出一些东西。当点击Rect而不是空舞台时，如何防止点击处理程序触发？

检测舞台点击的JS代码

window.stage.getContainer().addEventListener('click', function(e) {
    $.each(window.layer.get('.box'), function(index, box) {
       box.setScale(1);
       console.log('clicked on stage');
    });
});

【问题讨论】：

你知道我还在学习 Kinetic，但是这里有一个 JS 指针。您不需要将窗口放在事物之前以使它们全局化。如果您将 var 放在变量 decleration 之前，那么它将仅在创建它的范围/函数中可用。不将 var 放在变量 decleration 之前将使其成为全局（与将 window. 放在它之前相同）。你看到这篇文章了吗？..stackoverflow.com/questions/13866660/…他把一个矩形作为第一层，然后你可以检查。另外，使用普通事件是个好主意吗？
谢谢！！我实际上用 var App = {}; App.stage = ... 给它们命名了，还没有看到那个帖子，听起来像是一个 gd 的想法
jsfiddle.net/ABTAD/11
太棒了，你成功了。

标签： javascript jquery html canvas kineticjs

【解决方案1】：

您可以使用 stage.getContent() 访问舞台内容包装器。从那里，您可以像这样添加事件处理程序：

stage.getContent().addEventListener('click', ...); // 普通的javascript

或

$(stage.getContent()).on('click', ...); // jquery

【讨论】：

从 KineticJS 4.3.1 getDOM() 重命名为 getContent()
嗨，这可以在图层上完成，而无需设置背景矩形并绑定点击事件吗？