nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to stop the wheel event propagation

GennadyOster

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

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

RobertScheitlin__GISP

Gennady,

Have you tried

evt.preventDefault();
                evt.stopImmediatePropagation();

GennadyOster

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

RobertScheitlin__GISP

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

GennadyOster

Hi Robert!

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

Regards,
Gennady

DasaPaddock

Here's a similar solution:
http://forums.esri.com/Thread.asp?c=158&f=2421&t=274624#871027

GennadyOster

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

IvanBespalov

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();
}

GennadyOster

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

meijer

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

IvanBespalov

fix it

private function init():void
{
   //...
   initWheelEvents();
}

if not success, please show your code (ViewerContainer.mxml as it is)

UPD - working application

meijer

Hi Ivan,

Really like the Live train map! Any chance you share some tips on how it works, live updates on AGS services? 🙂

Thanks for the fix, that did it! No more scrolling at http://www.pbl.nl/en/roadsfromrio/trends-in-biodiversity-loss. I thought I had tried it, but browsercaching is also terrible here when debugging flex/flash applications...

To get it to work I also had to add:

init();

to the

private function creationCompleteHandler():void

This is loaded at creationComplete (see s:application at the top of the mxml)

Thanks,
Johan

IvanBespalov

I thought I had tried it, but browsercaching is also terrible here when debugging flex/flash applications...

Find
C:\Users\User Name\mm.cfg (if file doesn't exist create it)
How to change flash player debugger configuration file

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.