none
Adding handlers to both the map and to pushpins RRS feed

  • Question

  • I have added mousedown and mouseup handlers to the map, and a mousedown handler to a set of pushpins. These pushpins are looped over when being created, with a handler added to each one. When clicking on a pushpin, events are triggered for both the map and the pushpin, which is resulting in the pushpin event not behaving as desired. Is there a way so that when clicking on a pushpin that it doesn't trigger the map event at the same time?

    This gives an example of what I mean (printed things to the console when the map is clicked) if it helps:

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body>
           
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
                function loadMapScenario() {
                    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'Your Bing Maps Key'
                    });
    				Microsoft.Maps.Events.addHandler(map, 'mousedown', function () { console.log("Map clicked"); });
                    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
                    map.entities.push(pushpin);
                    // Binding the events
                    Microsoft.Maps.Events.addHandler(pushpin, 'click', function () { console.log("Pushpin clicked"); });              
                }
            </script>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
        </body>
    </html>

    Thanks

    Monday, July 4, 2016 3:49 PM

Answers

  • There is no option for this, especially when the mousedown event will be fired long before the click event will be triggered.

    That said, here is a one way to handle this. Change your pushpin click event to a mousedown event. Use a throttled event handler on the map and add a delay to the mouse events so as to give the pushpin event a chance to fire. If the pushpin even fires, skip the maps mousedown event. Here is a modified version of your code sample:

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body>
           
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
    			var skipOneMapMouseDown = false;
                function loadMapScenario() {
                    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'Your Bing Maps Key'
                    });
    				
    				Microsoft.Maps.Events.addTrottledHandler(map, 'mousedown', function () { 
    					if(skipOneMapMouseDown){
    						console.log("Map clicked"); 
    					}else{
    						skipOneMapMouseDown = false;
    						console.log("Skipped Map clicked event"); 
    					}				
    				}, 300);
    				
                    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
                    map.entities.push(pushpin);
    				
                    // Binding the events
                    Microsoft.Maps.Events.addHandler(pushpin, 'mousedown', function () { 
    					skipOneMapMouseDown = true;
    					console.log("Pushpin clicked"); 					
    				});              
                }
            </script>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
        </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Tuesday, July 5, 2016 6:54 PM