Select to view content in your preferred language

How to stop the wheel event propagation

12843
12
12-24-2011 10:46 PM
GennadyOster
Deactivated User
Hi !

I have the flex application (actually, the modified flex viewer) shown inside the iframe on the other page.
When I use wheel to zoom in/out, and the outer page has scroll bar - the wheel event bubbles to this outer page and it is scrolled.
I'd like to disable the wheel event propagation when the mouse pointer is over map.
Is there simple conventional way to do it ?

Thanks in advance.
Regards,
Gennady
Tags (2)
0 Kudos
12 Replies
RobertScheitlin__GISP
MVP Emeritus
Gennady,


   Have you tried
evt.preventDefault();
                evt.stopImmediatePropagation();
0 Kudos
GennadyOster
Deactivated User
Hi Robert !
Thank you very much for your help,  and sorry for delay.

I tried to play with wheel event and reached the 50% of success 🙂 : now I can switch off the wheel action on the map, but I still cannot do it for the browser window.
I played with the event listener parameters (priority, event phase) with no success.
Here is what I did in the index.mxml of the Flex viewer:

<s:Application ......... 
       creationComplete="init();">

......

  private function init() : void{
   mapManager.map.addEventListener(MouseEvent.MOUSE_WHEEL,onMouseWheel,false,0);
  }
  private function onMouseWheel(evt:MouseEvent):void{
   evt.preventDefault();
   evt.stopPropagation();
  }


Am I doing something wrong ?

Thanks.
Regards,
Gennady
P.S. I've used the stopImmediatePropagation too with the same result. Gena
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Gennady,

   To prevent the default browser scrolling requires some Googling and custom JavaScript code as that really has nothing to do with flex.

http://stackoverflow.com/questions/2005339/disable-mouse-wheel-scrolling-while-cursor-over-flex-app
0 Kudos
GennadyOster
Deactivated User
Hi Robert!

Thanks. I'll give it a try.
Sure I googled before posting to the forum, but missed this post somehow.



Regards,
Gennady
0 Kudos
DasaPaddock
Esri Regular Contributor
0 Kudos
GennadyOster
Deactivated User
Thanks, Dasa !

I've already used the mousewheeltrap solution. For me it has two great advantages: (i) I don't need to deal with "the host Party", 'cause the whole solution is inside Flex application, and (ii) I don't need to deal with dojo.

Nevertheless - thank you very much for your attention and help.

Regards,
Gennady
0 Kudos
IvanBespalov
Frequent Contributor
Gennady, may be this code is not better solution but it works without JS.

1 - We just added MouseWheel.as in to workspace as it is.
2 - in FlexViewer -> ViewerContainer.mxml added:
// inside ViewerContainer.mxml <Script> tag

/**
 * Listen creation complete handler
 */
private function init():
{
   //...
   initWheelEvents();
}

/**
 * Init mouse wheel events listeners
 */
protected function initWheelEvents():void
{
    if (mapManager && mapManager.map)
   {
        mapManager.map.addEventListener(MouseEvent.ROLL_OVER, mouseWheelOver);
 mapManager.map.addEventListener(MouseEvent.ROLL_OUT, mouseWheelOut);
   }
}

/**
 * mouse wheel out handler
 */
protected function mouseWheelOut(event:MouseEvent):void
{
    MouseWheel.release();
}
   
/**
 * mouse wheel over handler
 */
protected function mouseWheelOver(event:MouseEvent):void
{
    MouseWheel.capture();
}
0 Kudos
GennadyOster
Deactivated User
Hi Ivan !

Thanks. I'll give it a try a little bit later - even if not to implement, but at least to learn what and how you did it.

Regards,
Gennady
0 Kudos
JohanMeijer
Occasional Contributor
Hi Ivan,

I somehow can't get this to work...? We are using flexviewer 2.4 and I want to disable scrolling for instance here:

http://www.pbl.nl/en/roadsfromrio/trends-in-biodiversity-loss

* So you put the MouseWheel.as in it's own place under com.ru.etcs.ui
* import it in the viewercontainer.mxml
* put the code from your message in the script (for instance: under the import?)

For some reason I get errors on "expecting an identifier before the left bracket" at the init() function?

Thanks for any help!
Johan
0 Kudos