Disable mouse wheel scroll on child component - apache-flex

Question

here is the layout:
<s:Scroller>
<s:VGroup>
<s:List id="list1"/>
<s:List id="list2"/>
<component:ThirdPartyComponent/>
</s:VGroup>
</s:Scroller>
so, my application should only showing 1 scroll to the right which is the scoller, list1, list2 etc should not showing scroll.
it was working fine for a moment until we found that mouse wheel scroll not working. seem the mouseWheel event captured by the child component (list and thirdparty).
searched through the net to find solution, there is solution to stopImmediatePropagation() of the child mouseWheel event, but seems it is not a good solution. beside the part of ThirdPartyCompoent that doing scroll is a private member, so no way to listen mouseWheel from ThirdPartyCompoent
any idea?
CASE CLOSE
so far, the case solved by listen the mouseWheel event and disable root VGroup mouseChildren there, then on the root VGroup click handler i enable the mouseChildren. but if there is more elegan solution please comment.

Answer 1

Maybe these options could help you
OPTION#: 1
<component:ThirdPartyComponent
creationComplete = "afterCreation()"
id = "TPComponent">
<fx:Script>
// You could use initialize or creationComplete to handle MouseWheel Listener
private function afterCreation():void{
this.addEventListener(MouseEvent.MOUSE_WHEEL, hoverHandler);
}
private function hoverHandler(e:MouseEvent):void{
if(!e.isDefaultPrevented()){
e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
}
return false;
}
</fx:Script>
</component:ThirdPartyComponent>
But I suggest you to disable MouseWheel in children components with MouseEvent.ROLL_OVER, because it covers all area of any child object of the display object container. The buble event should return to false so that the children would have no chance to dispatch any mouse event including the MOUSE_WHEEL.
OPTION#: 2
<component:ThirdPartyComponent
creationComplete = "afterCreation()"
id = "TPComponent">
<fx:Script>
private function afterCreation():void{
this.mouseChildren = false;
}
</fx:Script>
</component:ThirdPartyComponent>
By setting mouseChildren to false, events on any mouseChildren are given to the parent magically. mouseChildren is not equal to mouseEnabled, so any given return of it will give different impact :)
You could combine Option# 1 & Option# 2 or choose one of them, which is the best for you :)

Answer 2

you can access third party components children via recursion
How to access children of children recursively?
and add mouse wheel block handler to children you need