CreateJS hit only visible elements

Question

I have two shapes in my canvas using CreateJS. In each shape I included a hit area with the own shape with a mouseover listener. Two shapes are one above the other. When I click into the shape, I received the two callbacks. It's possible to get only the callback to the visible shapes?

enter image description here

Answer 1

Similar to the DOM, the way mouse interaction works is to bubble up the display list, which excludes elements that are not part of the hierarchy chain of the event target.

This means siblings, or elements of other display lists that are underneath will not receive event handlers (which is what you described), and you will not receive mouse events for elements that are not the target of the mouse event.

However, you can wire up your own interaction fairly easily using getObjectsUnderPoint, which tells you what is under the mouse.

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

Here is a quick sample: http://jsfiddle.net/y8jhb26x/

Note that you can add the mouse event to any container you want to constrain what objects will trigger this check (I just used stage), but when you call getObjectsUnderPoint, it will return anything under the mouse. If you want to only check items in that container, you can use the contains method to filter out unwanted children:

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

You can also use arguments on getObjectsUnderPoint to filter out items with mouse handlers, or respect the mouseChildren/mouseEnabled property, which is how actual mouse interaction works.

• getObjectsUnderPoint method
• mouse interaction code

Hope that helps!