2012-02-07 26 views
1

IE9在顯示多邊形時不會點擊鼠標點擊。我測試過的每個其他瀏覽器(包括IE8)都可以正常工作。我認爲這個問題與svg對象沒有傳播點擊有關,但我不確定如何解決它。任何幫助將不勝感激。Bing Ajax v7不會觸發IE9的點擊事件

我剝離了我們的繪圖代碼以提供幫助。使用下面的代碼,您可以通過單擊地圖開始繪製,再次點擊原始點下方,然後將鼠標移動到左側並嘗試點擊來再現它。

注意,如果您雙擊地圖,它將觸發點擊事件。另外,如果我沒有在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> 

回答

0

是的,它的行爲有些奇怪。這與兩個地圖事件的組合有關,因爲如果您禁用移動事件,則IE9每次都會收到一個click事件。

隨着一些玩耍,我發現改變事件從clickmousedown修復了這個問題。也許這是因爲mousemove有機會干擾之前mousedown被調用?