导致单击事件触发两次的图像？

Question

我正在创建一个带有标记和信息流的谷歌地图。我希望每个广告有一个缩放按钮，使谷歌地图放大和居中以及相应的标记。

有关示例，请参阅此小提琴。is的代码相对比较简单：

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";
            }


        });
}

因为它听到了两声咔嗒声，所以它的净效果是零。但是，只需删除infowindow中的img标记就可以解决所有问题。

有什么理由可以解释为什么img标签的存在会导致脚本将一次点击解释为两次？我已经看到很多情况下，太多的点击被注册--通常是什么原因造成的？

有人能建议如何解决这个问题吗？谢谢。

Answer 1

它两次捕获您的domready事件(至少在我的Firefox19.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(...

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

在任何情况下，domready并不打算像您所做的那样用于dom的子集。我相信每次你改变标记的时候都会被解雇。因此，当启动document.getElementById("zoom_"+title).innerHTML = ...的行被执行时，domready事件将再次触发。