CreateJS只击中可见元素
问题描述:
我在使用CreateJS的画布中有两个形状。在每个形状中,我都包含一个带有鼠标悬停听众的自定形状的点击区域。两个形状是一个在另一个之上。当我点击形状时,我收到了两个回调。有可能只获得可见形状的回调?CreateJS只击中可见元素
答
到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
财产,这是实际的鼠标交互如何工作。
希望帮助!
它适合我!感谢:D – RafelSanso