CreateJS 只命中可见元素

Question

我使用 CreateJS 在 canvas 中有两个形状。在每个形状中，我都包含一个带有鼠标悬停侦听器的形状的点击区域。两个形状一个在另一个之上。当我点击形状时，我收到了两个回调。是否可以只获取可见形状的回调？

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 时，它会 return 鼠标下的任何东西。如果只想检查该容器中的项目，可以使用 contains 方法过滤掉不需要的子项：

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

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

希望对您有所帮助！

CreateJS 只命中可见元素

CreateJS hit only visible elements

shape

createjs

easeljs

hit