Mapbox-gl-js: event.stopPropagation() working but marked as "not a function" when executed

[jdato]

Hi there,

I am currently facing an issue when clicking different elements on a map. The map has separate layers that contain points and clusters and the propagation of events need to be stopped after individual points have been clicked, because the main map event needs some event handling too in my case. The stop propagation on individual is not recognized as a valid method on the MapClickEvent and shows up as an error on the console, even though it works.

Check out this js-bin and try to click anywhere on the map but the unclustered points.

Explanation:
A listener that has been implemented at the very bottom listening to all map clicks, so that an alert will show up for every click anywhere on the map but the unclustered points.

// Issue report
  map.on('click', function(e) {
  alert('General Map Click');
})

At the end of the listener for the unclustered points a _stopPropagation_ is being called to prevent the passing of the event to the new click listener. Thats where the error gets populated, but the event propagation is also stopped.

map.on('click', 'unclustered-point', function(e) {
  [...]        
  // Issue report
  e.stopPropagation();
}

Error output:

Uncaught TypeError: e.stopPropagation is not a function
    at r.<anonymous> (wupemoqeti:155)
    at r.delegates.o.<computed> (map.js:898)
    at r.Mt.fire (evented.js:119)
    at HTMLDivElement.<anonymous> (bind_handlers.js:156)

mapbox-gl-js version: 1.8.1

browser: Google Chrome Version: 80.0.3987.122

Steps to Trigger Behavior

1. Open JSBin
2. Click on unclustered point
3. Check Dev Console

Link to Demonstration

https://jsbin.com/

Expected Behavior

• Stopping of the click event propagation without throwing an error

Actual Behavior

• Stopps propagation but throws an error

Cheers!

[brncsk]

@jdato The argument e of your event handler is of type MapMouseEvent (a Mapbox-specific event type), and not of type Event (as defined by the DOM specification) therefore it lacks the stopPropagation() method.

You may want to use the MapMouseEvent.originalEvent property to gain access to the original DOM event and invoke stopPropagation() on that:

map.on('click', 'unclustered-point', function(e) {
  [...]        
  // Issue report
  e.originalEvent.stopPropagation();
}

[mourner]

@brncsk thanks for chiming in, you are right! Nothing to address on the GL JS side here.

[jdato]

Thanks guys. Regarding the answer @brncsk, I've tried that before and it doesn't seem to work for me - on the jsbin either. Which is odd.

[grantmccall]

@jdato I've got the same issue. The answer from @brncsk doesn't seem to work for me either. Did you have any success here?

[jdato]

@grantmccall Nope. I've built a workaround that works for my scenario...

[clementmas]

For future reference, here's an easy workaround: https://stackoverflow.com/a/53892631/8461337

[mohong]

@jdato I've got the same issue. The answer from @brncsk doesn't seem to work for me either. Did you have any success here?

[mukhtorov]

it is said that in R17, they gonna fix it...
but now, i also cant find any solution