none
Ajax v7 not firing click events with IE9 RRS feed

  • Question

  • IE9 is not firing the mouse click when displaying a polygon.  Every other browser I have tested with (including IE8) works fine.  I think the problem has something to do with the svg object not propagating the click, but I am not sure on how to fix it.  Any help would be greatly appreciated.

    I stripped down our drawing code to help.  Using the code below you can reproduce it by clicking on the map to start drawing, clicking again below your original point, and then moving the mouse to the left and trying to click.  

    Note, If you double click on the map it will fire the click event.   Also, if I don't draw the tempShape on the mousemove it will work.

    Very similar code in version 6.3 works fine.  We won't be able to upgrade from 6.3 until we can resolve this.  Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>
    Bing Map 
    </title> 
    <style type="text/css">
        #divMap
        {
            height: 500px !important;
            width: 940px !important;
        }
    </style>
    </head>
    <body onload="init();">
        <div id="divMap" style=""></div>
    
    
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
    
    <script type="text/javascript" language="javascript">
        //<![CDATA[
    
    
        var self = {
            map: null,
            drawing: {
                points: [],
                tempPoints: [],
                stopPolygon: null,
                shapeLayer: null
            }
        };
    
    
        function init() {
            self.map = new Microsoft.Maps.Map(document.getElementById('divMap'), {
                credentials: "Key",
                zoom: 15,
                center: { latitude: 45.9213475137949, longitude: -90.4466233402491 }
            });
    
    
            Microsoft.Maps.Events.addHandler(self.map, 'click', drawPolyMouseClickEvent);
            self.drawing.shapeLayer = new Microsoft.Maps.EntityCollection();
            self.map.entities.push(self.drawing.shapeLayer);
        }
    
    
        function drawPolyMouseClickEvent(e) {
            var x = e.getX();
            var y = e.getY();
            var point = new Microsoft.Maps.Point(x, y);
            var loc = self.map.tryPixelToLocation(point);
            var mouseMove = Microsoft.Maps.Events.addHandler(self.map, 'mousemove', drawPolyMouseMoveEvent);
            self.drawing.points.push(loc);
            if (self.drawing.points.length == 1) {
                self.drawing.stopPolygon = new Microsoft.Maps.Pushpin(loc, { text: " ", textOffset: new Microsoft.Maps.Point(0, 0) });
                self.drawing.shapeLayer.push(self.drawing.stopPolygon);
            }
        }
    
    
        function drawPolyMouseMoveEvent(e) {
            var x = e.getX();
            var y = e.getY();
            var point = new Microsoft.Maps.Point(x, y);
            var loc = self.map.tryPixelToLocation(point);
            self.drawing.tempPoints = self.drawing.points.slice(0, self.drawing.points.length);
                self.drawing.tempPoints.push(loc);
            self.drawing.shapeLayer.remove(self.drawing.tempShape);
            if (self.drawing.tempPoints.length == 2) {
                self.drawing.tempShape = new Microsoft.Maps.Polyline(self.drawing.tempPoints);
                self.drawing.shapeLayer.push(self.drawing.tempShape);
            }
            else if (self.drawing.tempPoints.length > 2) {
                self.drawing.tempShape = new Microsoft.Maps.Polygon(self.drawing.tempPoints);
                self.drawing.shapeLayer.push(self.drawing.tempShape);
            }
        }
        //]]>
    </script>
    
    
    </body>
    </html>


    -Steve

    • Moved by Ricky_Brundritt Saturday, March 10, 2012 1:29 PM (From:Bing Maps: Map Control and Web services Development)
    Tuesday, February 7, 2012 3:48 PM

Answers

  • I have hacked in an IE9 work around if anyone else is interested.  Before I add the click handler I use jquery to detect whether its IE9 and use the mousedown instead of click. 

    self.status.isIE9 = $.browser.msie && $.support.opacity;

    var mouseEvent = self.status.isIE9 ? 'mousedown' : 'click';

    Microsoft.Maps.Events.addHandler(self.map, mouseEvent, drawPolyMouseClickEvent);

    The downside to this approach is that on IE9 the user can't drag the mouse to pan the map while drawing.  In the

    drawPolyMouseClickEvent I added:

    e.handled = self.status.isIE9;


    -Steve

    Tuesday, February 7, 2012 6:31 PM

All replies

  • I have hacked in an IE9 work around if anyone else is interested.  Before I add the click handler I use jquery to detect whether its IE9 and use the mousedown instead of click. 

    self.status.isIE9 = $.browser.msie && $.support.opacity;

    var mouseEvent = self.status.isIE9 ? 'mousedown' : 'click';

    Microsoft.Maps.Events.addHandler(self.map, mouseEvent, drawPolyMouseClickEvent);

    The downside to this approach is that on IE9 the user can't drag the mouse to pan the map while drawing.  In the

    drawPolyMouseClickEvent I added:

    e.handled = self.status.isIE9;


    -Steve

    Tuesday, February 7, 2012 6:31 PM
  • I can confirm the bug, and nice solution - thanks for sharing. Hopefully it'll get noted and rectified in the future.

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

    Tuesday, February 7, 2012 6:50 PM
    Moderator