Search code examples
javascriptcreatejseaseljs

EaselJS - container mouse events handling


I have a container that contains multiple elements. I want to be able to detect clicks on container's children and container's area (rectangle defined by me).

Whenever I define a hitArea at the container, its children no more receive mouse events - they are dispatched to the container instead. However without hitArea I can't detect a click at the container area.

Fiddles that illustrate the issue:

The only solution I came up to is to use hitArea and on each event verify that there is no child at container to which it may be sent. However this approach is very irritating: I would have to catch all types of mouse events, despite my interest in them at the container level.

Is there an easy solution for this case?


Solution

  • I've decided to use another workaround - I created a DisplayObject, specified hitArea for it, and added it as a first child to the Container, the drawback is that I have to define event handlers both at that hitArea-object and Container. But it requires much less work than other solutions I've found.

    Updated fiddle.