none
Map Events v7: How do I stop propagation so pin click doesn't bubble to map click? RRS feed

  • Question

  • I want click events bound to both the map and a pin.  When a user clicks on a pin, only the pin click should trigger, but currently both events fire incorrectly.  First the map triggers then the pin.  How do I correct the event order (pin 1st then map 2nd) or how do I stop event propagation so the map event doesn't fire?

    Microsoft.Maps.Events.addHandler(map, 'click', callbackMap);

    Microsoft.Maps.Events.addHandler(pin, 'click', callbackPin); 

    -=Dan=-

    Friday, June 29, 2012 11:10 PM

Answers

  • You can check the targetType property of the event that fired the handler to see whether it was "pushpin" or "map". e.g.

    Microsoft.Maps.Events.addHandler(map, 'click', callbackMap);
    
    function callbackMap(e) {
    	if(e.targetType == 'pushpin')	{
    		// This will only execute if a pin was clicked on
    	} else if (e.targetType == 'map'){
    		// This will execute if another part of the map was clicked on
    	}
    }


    twitter: @alastaira blog: http://alastaira.wordpress.com/

    Saturday, June 30, 2012 6:37 AM
    Moderator
  • Also, you can mark the pushpin click event as handled.

    function callbackPin(e){
         //Your code for handling pin click event
    
         //Mark event as handled to prevent bubbling
         e.handled = true;
    }


    http://rbrundritt.wordpress.com

    Sunday, July 1, 2012 1:20 PM

All replies

  • You can check the targetType property of the event that fired the handler to see whether it was "pushpin" or "map". e.g.

    Microsoft.Maps.Events.addHandler(map, 'click', callbackMap);
    
    function callbackMap(e) {
    	if(e.targetType == 'pushpin')	{
    		// This will only execute if a pin was clicked on
    	} else if (e.targetType == 'map'){
    		// This will execute if another part of the map was clicked on
    	}
    }


    twitter: @alastaira blog: http://alastaira.wordpress.com/

    Saturday, June 30, 2012 6:37 AM
    Moderator
  • Also, you can mark the pushpin click event as handled.

    function callbackPin(e){
         //Your code for handling pin click event
    
         //Mark event as handled to prevent bubbling
         e.handled = true;
    }


    http://rbrundritt.wordpress.com

    Sunday, July 1, 2012 1:20 PM