Separate objects down prototype chain with conflicting event listeners

Question

I'm using prototypal inheritance with a Circle and Square object both inheriting from a RootShape object. I am using EaselJS and am not sure if the behavior I'm encountering is specific to prototypal inheritance, the EaselJS library, or a mix of the two.

You can see my problem illustrated here: http://fiddle.jshell.net/sdg9/UNY6E/

When I add an event listener (specifically a pressmove listener) to the Circle or Square prototype it works as I'd expect. All circle objects respond to the circle prototype listener and all square objects do likewise with the square prototype listener.

When I add an event listener to the RootShape prototype that both Circle and Square inherit from I encounter a strange behavior. The Square events trigger Circle listeners and vice versa. In fact all 3 listeners (on RootShape, Circle, and Square) are triggered. I didn't think objects further down the prototype chain would conflict this way. Is there an alternative approach I can take to have an eventListener on the RootShape object and not cause the Square and Circle to trigger each other's listeners?

Answer 1

It seems that all the event listeners you defined are added to your RootShape prototype instead of each sub-prototypes. A solution would be to add the event listeners when you initialize each sub-prototypes.