Question

IE9在显示多边形时未触发鼠标单击。我测试过的所有其他浏览器（包括IE8）都可以正常工作。我认为问题与svg对象没有传播点击有关，但我不确定如何修复它。任何帮助将不胜感激。

我删除了我们的绘图代码以提供帮助。使用下面的代码，您可以通过单击地图开始绘图，再次单击原始点下方，然后将鼠标移动到左侧并尝试单击来重现它。

注意，如果双击地图，它将触发click事件。另外，如果我不在mousemove上绘制tempShape，它将起作用。此外，mouseup和mousedown事件将起作用，但这会影响绘制时拖动地图的能力。以下是一些示例代码：

    <!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>

Answer 1

是的，它表现得有点奇怪。这与两个地图事件的组合有关，因为如果您禁用移动事件，则IE9每次都会收到click个事件。

通过一些游戏，我发现将事件从click更改为mousedown解决了问题。也许是因为mousedown在mousemove有机会干涉之前被调用了？

Bing Ajax v7没有使用IE9触发点击事件

1 个答案: