Question

我使用CreateJS在画布中有两个形状。在每个形状中，我都包含一个具有自己形状的命中区域和鼠标悬停监听器。两个形状一个在另一个之上。当我点击形状时，我收到了两个回调。只能回调可见形状？

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属性，这就是实际鼠标交互的工作方式。

希望有所帮助！

CreateJS仅命中可见元素

1 个答案: