mouseout event handler isn't trrigering - easeljs

Question

I have a strange behavior in my app:
I have a collection of shapes that each one of them has a mouseover and mouseout event handlers.
When the user moves over a shape, its color changes and then when he moves out of it, its color returns to the original color.
The thing that I don't understand is sometimes, the mouseout event isn't trigering at all and the color of the shape remains with the hovered state.
I try to print to the console and couldn't find a problem. All I know is that it doesn't enters the mouseouse handler
var onMouseOver = function (e, sha, container) {
if (seat.isHovered) return;
$('body').css('cursor', 'pointer');
var curHoveredShape = sha;
var newShape = new createjs.Shape();
newShape .addEventListener('mouseout', function (e) {
onShapeMouseOut(e, e.target, e.target.parent);
});
newShape .graphics.beginFill(hoverdSeatColor).drawRoundRect(0, 0, 5, 5, 1.5);
newShape .x = curHoveredSeat.x;
newShape .y = curHoveredSeat.y;
newShape .parent = container;
sha.removeEventListener("mouseover", arguments.callee);
container.removeChild(sha);
container.addChild(newShape );
newShape .isHovered = true;
lastHoveredSeat = newShape ;
stage.update();
}
Here's the code for the mouseout:
var onMouseOut = function (e) {
var curShape= e.target;
var container = e.target.parent;
$('body').css('cursor', 'pointer');
var newShape = new createjs.Shape();
newShape.graphics.beginFill(selectedSeatColor).drawRoundRect(0, 0, 5, 5, 1.5);
newShape.x = curShape.x;
newShape.y = curShape.y;
newShape.parent = container;
curShape.removeEventListener("mouseout", arguments.callee);
container.removeChild(curShape);
container.addChild(newShape);
newShape.isHovered = false;
lastHoveredSeat = null;
newShape.addEventListener('mouseover', function(e){
onSeatMouseOver(e, e.target, e.target.parent);
});
stage.update();
$(mapManagerObj).trigger("onSeatHoveredOut");
}