google-maps - 图像导致点击事件触发两次？

Question

我正在创建带有标记和信息窗口的 Google map 。我希望每个信息窗口都有一个缩放按钮，可以使 Google map 放大并居中以及相应的标记。

看到这个 jsfiddle举个例子。 infowindow的代码比较简单:

infoWindowArray[i] = new google.maps.InfoWindow({
    position: latlng,
    content: "<a href='/"+pitches[i].slug+".html'>"+pitches[i].name + " ("+ pitches[i].club+")</a><br /><img width='16' alt='Loupe' src='//upload.wikimedia.org/wikipedia/commons/thumb/4/48/Loupe.svg/32px-Loupe.svg.png'/> <a id='zoom_"+pitches[i].id+"' href='javascript:void(0)'>Zoom In</a>"
});

但是，我的脚本在 Chrome 中很不稳定，而在 Firefox 中它总是失败。原因是因为一次点击以某种方式被触发两次。所以这个函数:

function setupZoomListeners(object, title, google_position, map){
    google.maps.event.addListener(object, 'domready', function() {
        google.maps.event.addDomListener(document.getElementById("zoom_"+title), 'click', function(){ 

            if (document.getElementById("zoom_"+title).innerHTML == "Zoom In"){
                map.setCenter(google_position);
                map.setZoom(14);
                document.getElementById("zoom_"+title).innerHTML = "Zoom out";
            } else {
                map.setCenter(new google.maps.LatLng(53.5, -2.2));
                map.setZoom(6);
                document.getElementById("zoom_"+title).innerHTML = "Zoom In";
            }


        });
}

正在放大和缩小，因为它会听到两次点击声，因此净效果没有任何意义。但是，简单地删除信息窗口中的 img 标签似乎可以解决所有问题。

为什么 img 标签的存在会导致脚本将一次点击解释为两次点击，是否有任何地球上的原因？我见过很多点击次数过多的案例——通常是什么原因造成的？

谁能建议如何解决这个问题？谢谢。

Answer 1

它两次捕获您的 domready 事件(至少在我的 Firefox 19.0.2 版本中)。您可以看到，如果您像这样启动 zoomListeners 函数:

function setupZoomListeners(object, title, google_position, map){
    console.log('zoomListener');
    google.maps.event.addListener(object, 'domready', function() {
        console.log('domReady');
        google.maps.event.addDomListener(...

我不认为 domready 是在这里使用的好事件。就个人而言，我只会使用一个 infoWindow 对象并在单击标记时填充不同的 HTML。

在任何情况下，domready 都不会像您一样用于 dom 的子集。我相信每次更改标记时它都会触发。所以当行开始 document.getElementById("zoom_"+title).innerHTML = ...执行 domready 事件将再次触发。