Question

自从今天早些时候从版本49升级到Chrome 50.0.2661.87 m以来，我的谷歌地图页面上的img元素没有触发他们的onclick事件。使用google maps api controls array，使用javascript动态地将这些img添加到页面中。我已经能够在显示here的简单谷歌地图实现中重现该问题。在IE和Firefox中，此页面上的聊天按钮将触发并显示警报。但是在Chrome 50中它有时只会发射。我可以在同事的电脑上重现这个问题。它似乎是第一次你点击页面，但如果你重新加载它不起作用。当您单击“实时聊天”按钮时，它应显示警报。另外，如果我使用相同的技术将地图上的span和div元素作为兄弟元素放置到img元素上，那么它们的onclick事件就可以正常启动。

以下是上面引用的页面的代码。

<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization,geometry"></script>
    <script type="text/javascript">
        function initialize()
        {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
            var container = document.createElement('div');
            var img = document.createElement('img');
            img.src = "http://diamondmaps.com/img/btnchat.png";
            img.onclick = function ()
            {
                alert('click');
            };
            container.style.padding = '5px';
            container.appendChild(img);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(container);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

Answer 1

通常，您希望在设置img.src之前附加事件处理程序。

var img = document.createElement('img');
img.onclick = function () {
  alert('click');
};
img.src = "http://diamondmaps.com/img/btnchat.png";

话虽如此，有传言称Chrome 50破坏了img.onload。

https://productforums.google.com/forum/#!topic/chrome/p51Lk7vnP2o

我不确定img.onclick，但我怀疑他们可能是相关的。

在谷歌地图api

1 个答案: