区分离开形状和进入重叠形状（KineticJS）答案

【问题标题】：Distinguish between leaving shape and entering overlapping shape (KineticJS)区分离开形状和进入重叠形状（KineticJS）
【发布时间】：2012-10-02 21:52:59
【问题描述】：

我想这将是我遇到的一个很常见的问题。我在一个较大的形状之上有一个小形状。当我输入大形状时，它被注册为mouseenter/mouseover。但是当我输入小形状时，大形状注册一个mouseleave/mouseout。这就像我去洛杉矶国际机场的洗手间，机场工作人员要求我因为离开航站楼而再次通过安检。

这是一个minimal JSFiddle example 说明问题。

【问题讨论】：

标签： javascript mouseevent html5-canvas kineticjs

【解决方案1】：

这是有意的。您不再悬停在圆圈上，而是悬停在三角形上。这些是层，所以根据您的定义，当您站在地毯上时，您会接触到地板。

如果希望三角形忽略事件，可以调用 triangle.setListening(false)，如下所示：http://jsfiddle.net/YcBNL/19/。这样，事件将通过它传递到下面的形状。

另一种方法是使用 Kinetic.Group 对圆形和三角形进行分组，并将事件侦听器添加到组而不是圆形。

【讨论】：

您的群组建议听起来很有希望，但如果您向群组和群组成员添加事件侦听器，它仍然会遇到同样的问题

【解决方案2】：

Michael's suggestion 上面看起来很有希望，但它所做的只是限制一个形状（在本例中为三角形），或者将所有功能向上移动到组中，这也不是我想要的。

暂时我所做的是对三角形使用 mouseenter 信号，对圆形使用 mouseleave 信号，这似乎有效。但是，我怀疑这是否适用于两个以上的重叠形状。如果有人提出更好的解决方案，我会全力以赴 =)

【讨论】：