Prevent popups from hijacking interaction events

[anandthakker]

If a popup is beneath the mouse and I try to use trackpad pinch or scroll to zoom, I end up getting the browser default behavior of zooming the whole page instead. I'd propose that, at least by default, popups listen for those events and preventDefault on 'em.

[mourner]

:+1: agreed.

[anandthakker]

So actually, it looks like just preventDefault won't be enough -- will also need to forward the event to the canvas element (or something), because it currently doesn't propagate there.

[mourner]

@anandthakker should it propagate? I thought it's OK for map to not react to scrolls inside a popup container, since this is popup that should be scrolled only.

[anandthakker]

Ah right. I agree, for scrolling the pop up should scroll, but maybe for multi touch zooming using the trackpad, it should propagate to the map? On Tue, Jun 16, 2015 at 11:05 AM Vladimir Agafonkin < notifications@github.com> wrote:

@anandthakker https://github.com/anandthakker should it propagate? I thought it's OK for map to not react to scrolls inside a popup container, since this is popup that should be scrolled only.

— Reply to this email directly or view it on GitHub https://github.com/mapbox/mapbox-gl-js/issues/1280#issuecomment-112463274 .

[anandthakker]

(Hmm... I guess I don't even know if that making distinction is possible...)

[patodevilla]

Is there any fix on this? I do not want the scroll event to be propagated to the map, my issue comes when zooming in multitouch or trackpad over popups (whole viewport gets zoomed). This makes the usability very limited.

[fungiboletus]

You could listen to the wheel events in your popup, and propagate them to the map using the undocumented (and not in Typescript definition) map.scrollZoom.wheel method.

For example:

popup.addEventListener('wheel', (event) => {
  map.scrollZoom.wheel(event);
});

[Jamie5]

While @fungiboletus 's workaround works, it would be nice if this could be done without using an undocumented workaround.