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 🙂