stopEventPropagation不適用於移動Safari或Chrome開發工具仿真

Question

用例;點擊標記打開infowindow，點擊地圖關閉它。

stopEventPropagation用於防止標記點擊傳播到地圖（點擊地圖將關閉infowindow），這可以在Chrome中正常工作，但在移動Safari（iphone 5）或chrome本身模擬相同的手機時，事件不會停止（因此信息框未顯示，或立即關閉）。

function stopEventPropagation(e) { 
    var evt = e ? e : window.event; 
    evt.cancelBubble = true; 
    if (evt.stop) evt.stop(); 
    if (evt.stopPropagation) evt.stopPropagation(); 
    if (evt.stopImmediatePropagation) evt.stopImmediatePropagation(); 
    if (evt.preventDefault) evt.preventDefault(); 
    evt.returnValue = false; 
} 

function initialize() { 
    var map = new google.maps.Map(document.getElementById('map-canvas')); 
    var infowindow = new google.maps.InfoWindow(); 
    var bounds = new google.maps.LatLngBounds(); 

    var point = new google.maps.LatLng(49.277, -123.125); 
    var RichMarkerDiv='<div style="width:100px; height:100px;border:solid black 1px;">RichMarker</div>'; 
    var marker = new RichMarker({ position: point, map: map, title: 'RichMarker', content: RichMarkerDiv }); 
    google.maps.event.addListener(marker, 'click', function(e) { 
     stopEventPropagation(e); 
     infowindow.setContent(this.title); 
     infowindow.open(map, this); 
    }); 

    bounds.extend(point); 

    google.maps.event.addListener(map, 'click', function(event) { 
     infowindow.close(); 
    }); 

    map.fitBounds(bounds); 
} 

initialize(); 

這可以在這裏進行測試：http://jsfiddle.net/hy7rrm28/4/

使用豐富的標記lib中有一個小的改進，以繞過事件的建議在這裏：https://code.google.com/p/google-maps-utility-library-v3/issues/detail?id=280

注：這是工作一個星期左右前，所以它可能與谷歌地圖內的更新或這些瀏覽器（？）中的更新有關。

Answer 1

我最近爲我創建的自定義Google地圖標記解決了類似的問題，我相信我知道發生了什麼。我有類似於你的代碼。

如果您不知道（並且我之前未遇到此問題），則在移動設備上，當您單擊屏幕時，會觸發TouchEvent（https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent）...此TouchEvent未創建桌面。

在桌面上，我的代碼起作用了，因爲我認爲標記和地圖與相同事件進行了交互：MouseEvent。然而，在手機上，當我把一個調試器放到這個代碼的回調中時 - google.maps.event.addListener（map，'click'，callback） - 我發現'window.event'對象實際上是一個TouchEvent（而當我檢查我的標記點擊事件時，它與MouseEvent交互）。很明顯，我需要停止TouchEvent的發生。

當我聽到標記上的'touchend'事件並停止傳播時，停止了在移動設備上發生的任何點擊事件（包括標記和地圖）。我將這段代碼插入你的小提琴中，就像我爲之工作的那樣。不幸的是，它並沒有在你的小提琴中奏效。

google.maps.event.addDomListener(marker, "touchend", function(e) { 
    e.stopPropagation(); 
    infowindow.setContent(this.title); 
    infowindow.open(map, this); 
}); 

爲什麼它沒有工作，我不能馬上確定，但我的猜測是，該解決方案是非常接近（也許問題與我的標記，你RichMarker之間的區別做呢？ 'div'我使用addDomListener不是Google地圖對象，也許就是這樣？）。上面解決方案的唯一問題（或類似的）是我想要在標記上發生其他事件（例如雙擊），我需要做一些不同的事情（因爲停止傳播'touchend'事件將阻止其他點擊事件在對象上被觸發）。我最終創建了一個名爲'touchMobileEvent'的變量並將其設置爲false。當標記觸發'touchend'事件（僅在移動設備上觸發）時，我將其設置爲true，點擊事件將觸發標記，然後在我的地圖的click事件回調中創建一個條件，將touchMobileEvent設置回錯誤而不是觸發點擊事件。我也把它回false時，雙擊事件被觸發：

創建變量來檢查touchMobileEvent正在發生：

var touchMobileEvent = false; 

設置我的標誌事件：

google.maps.event.addDomListener(div, "touchend", function(e) { 
    touchMobileEvent = true; 
}); 

google.maps.event.addDomListener(div, "click", function(e) { 
    e.stopPropagation(); 
    self.triggerClickEvent(); 
}); 

google.maps.event.addDomListener(div, "dblclick", function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    self.triggerDblClickEvent(); 
    touchMobileEvent = false; 
}); 

設置我的地圖上的事件：

google.maps.event.addListener(map, 'click', function(e){ 
    if (touchMobileEvent) { 
    touchMobileEvent = false; 
    } else { 
    mapClickEvent(); 
}); 

希望有所幫助。我建議檢查每個回調中觸發/捕獲的各種事件。我原來的錯誤是在假設事件偵聽器，用相同的事件交互時（實際上我阻止的MouseEvent的傳播，但沒有做任何事情有關已在移動創建的TouchEvent）。