“mouseDown” event does not triggered on “click” in a scenario

@ansis is already working on this.

Since Jan 22, 2021.

Hello,

**mapbox-gl-js version**: v2.0.1

**browser**: Chrome

In mapbox gl js latest version, I bind a couple of events like click, mousedown, mouseup and mousemove.

### Steps to Trigger Behavior

1. In the codepen shared below(Please open it in google chrome mobile emulator). If we click anywhere on the map, a series of events order occur:
```
"mouseMove"(First)
"mouseDown"
"mouseUp"
"click"(Last)
```
2. But on clicking on the marker's, firstly the "mouseMove" event gets triggered which shows the popup but then the rest of the events("mouseDown", "mouseUp" and "click") gets called on popup instead and not the map.
3. Hence the callbacks that are bind on Map(MapEvents) do not get called.

The one hack I can do is to add setTimeout delay, so that event could go down to map first and then add the popup. But I really hope, if there could be a better way of achieving this. As in desktop, this does not happen.

### Link to Demonstration
Codepen(Request to please open in chrome mobile device emulator)
```
https://codepen.io/dollysingh3192/pen/QWKzdbO
```
Also added a video at Dropbox. Have a look!
```
https://www.dropbox.com/s/87bq7t762s6t6qw/Jan-17-2021%2000-13-36.mp4?dl=0
```

### Expected Behavior
The Events binded on the map should get called.

### Actual Behavior
The Events binded on the map does not get called. Instead, the popup shows up first and does not allow the MapEvents get called.

I don't know if this is a bug. If not what would be the better way of achieving events to call in an order in both desktop and mobile. I struggled a lot to find out but no luck. Any suggestion would be helpful Mapbox Team.