0

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

在此处输入图像描述

4

1 回答 1

0

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

您还可以使用 on 参数getObjectsUnderPoint来过滤掉带有鼠标处理程序的项目，或者尊重mouseChildren/mouseEnabled属性，这是实际鼠标交互的工作方式。

希望有帮助！

于 2016-06-28T18:32:37.253 回答