I noticed that when I click anywhere in bing maps, the element that listens for the click / gets returned to me is different on Chrome / Edge browsers than on Firefox. For example: I found this basic React app online that can serve as a tool - / (but you can repro this on a create-react-app + import bing maps using Microsoft.Maps) In devtools, I added this console log to trace what element will listen for a click(
document.addEventListener('click', function(event) { console.log('Element clicked:', event.target); })
on chrome / edge, this element gets returned: But on firefox this gets returned:
Looking at the elements tab, firefox returns the first element, while chrome returns the inner grandchild: It kinda looks like maybe the browsers handle z-index differently? if so, does anyone have any thoughts on how i can make firefox return the same event that chrome / edge does?
Thank you!
I noticed that when I click anywhere in bing maps, the element that listens for the click / gets returned to me is different on Chrome / Edge browsers than on Firefox. For example: I found this basic React app online that can serve as a tool - https://bingmaps-reactlify.app/ (but you can repro this on a create-react-app + import bing maps using Microsoft.Maps) In devtools, I added this console log to trace what element will listen for a click(
document.addEventListener('click', function(event) { console.log('Element clicked:', event.target); })
on chrome / edge, this element gets returned: But on firefox this gets returned:
Looking at the elements tab, firefox returns the first element, while chrome returns the inner grandchild: It kinda looks like maybe the browsers handle z-index differently? if so, does anyone have any thoughts on how i can make firefox return the same event that chrome / edge does?
Thank you!
Share Improve this question asked Feb 16 at 3:39 jt5301jt5301 436 bronze badges1 Answer
Reset to default 0It's anyone's guess why Firefox would do this. Nothing to do with Bing Maps as this is the generic event listener of the browser, searching through all elements in the pages DOM. It does seem very odd that Firefox would trigger the event on the parent div (MicrosoftMap) rather than on the canvas which is the top visual item. Note that there are a ton of things browsers do differently. It used to be a bigger issue back in the internet explorer days. Chrome and Edge use the same underlying engine for rendering/JavaScript, so they will act nearly identically.
Note, if you want an event to fire when a user clicks on the map, there are several ways to do this in a consistent way.
- Option 1: Use the Bing Maps events and add an event to the map:
Microsoft.Maps.Events.addHandler(map, 'click', function () { });https://learn.microsoft/en-us/bingmaps/v8-web-control/map-control-concepts/map/map-events - Option 2: Add a click event listener to your
myMapdiv.document.getElementById("myMap").addEventListener('click', function(event) { console.log('Element clicked:', event.target); })
All that said, if you are developing a new app with Bing maps, you should only be doing that if your company already has a license for Bing Maps and are well aware that Bing Maps is retiring in 2028 (unlicensed accounts will retire in June of 2025). https://www.microsoft/en-us/maps/bing-maps/discontinued-services?msockid=191627acbb23650b07c93534ba316400