CreateJS只击中可见元素

Question

我在使用CreateJS的画布中有两个形状。在每个形状中，我都包含一个带有鼠标悬停听众的自定形状的点击区域。两个形状是一个在另一个之上。当我点击形状时，我收到了两个回调。有可能只获得可见形状的回调？

enter image description here

Answer 1

到DOM，途中鼠标交互工作原理类似是气泡在显示列表，其中不包括不属于事件目标的层次结构链的一部分的元件。

这意味着兄弟或其他显示列表的元素不会接收到事件处理程序（这就是您所描述的），并且您不会接收不是鼠标事件目标的元素的鼠标事件。

但是，您可以使用getObjectsUnderPoint很容易地连接您自己的交互，它告诉您鼠标下的内容。

stage.on("click", handleClick); 
function handleClick(event) { 
    var list = stage.getObjectsUnderPoint(event.localX, event.localY); 
    for (var i=0, l=list.length; i<l; i++) { 
    console.log(list[i]); 
    } 
} 

下面是一个简单示例：http://jsfiddle.net/y8jhb26x/

注意，您可以将鼠标事件添加到要限制哪些对象将触发此检查（我只是用阶段）任何容器，但是当你打电话getObjectsUnderPoint，它将返回任何东西下的鼠标。如果你只想查看该容器中的项目，您可以使用contains方法来过滤掉不想要孩子：

for (var i=0, l=list.length; i<l; i++) { 
    if (someContainer.contains(list[i])) { 
    console.log(list[i]); 
    } 
} 

您也可以使用getObjectsUnderPoint参数来筛选出的项目与鼠标处理程序，或尊重mouseChildren/mouseEnabled财产，这是实际的鼠标交互如何工作。

• getObjectsUnderPoint method
• mouse interaction code

希望帮助！