0

我正在从信息窗口收集用户输入。在信息窗口上，我有一个“保存”按钮来保存用户的输入。但是当我点击那个按钮时，我也点击了地图，它会让我的标记移动到别处。单击“保存”按钮时，我只需要关闭信息窗口。我不想让我的标记移动。这是代码： 

<body>
<script>
var infowindow, marker;
function initialize()
{
var myCenter = new google.maps.LatLng( 10.771654, 106.698285 );
var mapProp = {
center: myCenter,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"),  
    mapProp);   

    var html = "<div>Comment:<br/>" +
           "<textarea id='text_map' cols='25' rows='4'></textarea>" + 
           "<input type='button' onclick='set_data()' value='Save'/>" + 
            "</div>";

    infowindow = new google.maps.InfoWindow({
         content: html
    });

    marker = new google.maps.Marker({
    });

    google.maps.event.addListener(map, 'click', function(event)      
    {                       
    var location = event.latLng;        
    marker.setPosition(location);
    marker.setMap(map);
        infowindow.open(map,marker);    

    });

    google.maps.event.addListener(marker, 'click', function() { 

       infowindow.open(map,marker);                     
    }); 
}

function set_data()
{
   //do something                     
   infowindow.close();                      
}
function loadScript()
{
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = "http://maps.googleapis.com/maps/api" +    
   "/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
   document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<div id="googleMap" style="width: 500px; height: 500px"></div>

</body>
</html>

奇怪的是我在 IE 9 上没有这个问题，但在 FireFox 和 CHROME 上。

编辑：

为了解决这个问题，我只需要停止事件传播。我是这样做的：将事件作为函数 set_data() 的参数传递

onclick='var 事件 = 参数[0] || 窗口.事件；设置数据（事件）'

在 set_data 添加这行代码：

e.stopPropagation();

感谢 Berend 提供有用的链接。

4

1 回答 1

0

一个事件将冒泡或捕获 dom 树。唉，对我们来说，IE 使用的模型与 Chrome 和 Firefox 不同。见http://www.quirksmode.org/js/events_order.html

如果没有停止，事件将继续在 DOM 树上或下传播。这就是您所体验到的：点击事件被按钮以及 chrome 和 Firefox 中的地图捕获。由于 IE 使用不同的模型，这在 IE9 中不会发生。

要停止事件传播，请使用：

e.stopPropagation();

此处还讨论了该解决方案 如何使用内联 onclick 属性停止事件传播？

于 2013-01-01T15:49:53.480 回答