How to Prevent Click Event Propagation Between Overlapping Layers in Azure Maps?

Hi,

I am working with Azure Maps and have two overlapping marker layers: primaryMarkerLayer and currentLocationLayer. I have added a click event to both layers.

Here’s what I’m experiencing:

When I click on the currentLocationLayer marker, the click event for the primaryMarkerLayer is triggered first, followed by the currentLocationLayer click event.

Here’s the relevant code:

 map.events.add('ready', function () {
             // Create the data source
            var mainDatasource = new atlas.source.DataSource("maindatasource");
            map.sources.add(mainDatasource);
            var currentDatasource = new atlas.source.DataSource("currentLocation");
            map.sources.add(currentDatasource);
          
            // Add some markers to the primaryMarkerLayer
            var primaryMarkers = [
                new atlas.data.Feature(new atlas.data.Point([-122.33606,47.61266]), {
                    name: 'Primary Marker 1'
                }),
                new atlas.data.Feature(new atlas.data.Point([-122.32, 47.61]), {
                    name: 'Primary Marker 2'
                })
            ];

            // Add a marker to the currentLocationLayer
            var currentLocationMarker = new atlas.data.Feature(new      atlas.data.Point([-122.33606,47.61266]), {
                name: 'Current Location'
            });

            // Add features to the data source
            mainDatasource.add(primaryMarkers);
            currentDatasource.add(currentLocationMarker);

            // Create the primaryMarkerLayer
            var primaryMarkerLayer = new atlas.layer.SymbolLayer(mainDatasource, null, {
                iconOptions: {
                    image: 'pin-round-darkblue',
                    anchor: 'center',
                    ignorePlacement: true,
                    allowOverlap: true
                }
            });

            // Create the currentLocationLayer
            var currentLocationLayer = new atlas.layer.SymbolLayer(currentDatasource, null, {
                iconOptions: {
                    image: 'pin-round-red',
                    anchor: 'center'
                },
                
            });

            // Add the layers to the map
            map.layers.add(primaryMarkerLayer);
            map.layers.add(currentLocationLayer);

            // Click event for primaryMarkerLayer
            map.events.add('click', primaryMarkerLayer, function (e) {
               
                alert('Clicked on: ' + e.shapes[0].getProperties().name);
            });
            // Click event for currentLocationLayer
            map.events.add('click', currentLocationLayer, function (e) {
                
                alert('Clicked on: ' + e.shapes[0].getProperties().name);
              
            });
        });

Question:

How can I prevent the primaryMarkerLayer click event from being triggered when clicking on the currentLocationLayer marker that is on top? Is there a way to ensure that only the currentLocationLayer click event is triggered when its marker is clicked?

Any insights or suggestions would be greatly appreciated!