stopEventPropagation不适用于移动Safari或Chrome开发工具仿真 [英] stopEventPropagation not working on mobile safari or chrome dev tools emulation
问题描述
stopEventPropagation 用于防止标记点击传播到该地图（点击地图将关闭infowindow），这在铬合金中运行良好，但在移动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;
函数初始化（）{
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/
使用丰富的标记库有一点改进，按照以下建议传递活动： https： //code.google.com/p/google-maps-utility-library-v3/issues/detail?id=280
注意：这是大约一周前工作，所以它可能与谷歌地图或这些浏览器中的更新（？）有关。 解决方案
p>我最近为我创建的自定义Google地图标记解决了类似问题，并且我相信我知道发生了什么。我有类似于您的代码。
如果您不知道（并且我之前未遇到此问题），则在移动设备上，当您单击屏幕，一个TouchEvent（ https://developer.mozilla.org/en-US / docs / Web / API / TouchEvent ）触发...此TouchEvent不在桌面上创建。
在桌面上，我的代码工作是因为我在假设标记和地图与相同事件交互时是正确的：a 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之间的差异有关？我使用addDomListener的'div'不是谷歌地图对象，也许就是这样？）。上面解决方案的唯一问题（或类似的）是我想要在标记上发生其他事件（例如双击），我需要做一些不同的事情（因为停止传播'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执行任何操作）。
Use case; click on marker opens infowindow, click on map closes it.
stopEventPropagation is used to prevent that marker click propagates to the map (click on map would close the infowindow), this works fine in chrome, but in mobile safari (iphone 5) or chrome itself emulating the same phone, the event isn't stopped (thus the infobox not shown, or inmediatelly closed).
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();
This can be tested here: http://jsfiddle.net/hy7rrm28/4/
The rich marker lib used has a small improvement to pass around events as suggested here: https://code.google.com/p/google-maps-utility-library-v3/issues/detail?id=280
Note: This was working a week or so ago, so it may be related to an update inside google maps, or in these browsers (?).
I recently solved a similar problem for a custom google maps marker I created, and I believe I know what's going on. I had code similar to yours.
If you don't know (and I didn't prior to encountering this issue), on mobile devices, when you click the screen, a TouchEvent (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) is triggered... this TouchEvent isn't created on desktop.
On desktop, my code worked because I was correct in assuming that the marker and map were interacting with the same event: a MouseEvent.
On mobile, however, when I put a debugger into the callback of this code - google.maps.event.addListener(map, 'click', callback) - I found the 'window.event' object was actually a TouchEvent (whereas when I checked the click event on my marker, it was interacting with a MouseEvent). It became clear that I needed to stop the TouchEvent from happening.
When I listened to the 'touchend' event on my marker and stopped propagation, this stopped any click events from taking place (both on the marker and the map) on mobile. I inserted this code into your fiddle, as something similar worked for me. Unfortunately, it didn't work in your fiddle.
google.maps.event.addDomListener(marker, "touchend", function(e) {
e.stopPropagation();
infowindow.setContent(this.title);
infowindow.open(map, this);
});
Why it didn't work, I'm not immediately sure, but my guess is the solution is pretty close to that (maybe the problem has to do with the differences between my marker and your RichMarker? The 'div' I use addDomListener on is not a google maps object. Maybe that's it?). The only problem with the solution above (or something like it) is that I wanted other events to take place on the marker (ex. double click), I needed to do something a little different (since stopping propagation of the 'touchend' event would stop other click events from being triggered on the object). I ended up creating a variable named 'touchMobileEvent' and set it to false. When the 'touchend' event is triggered on the marker (only triggered on mobile), I set it to true, the click event would trigger on the marker, and then I created a conditional within my map's click event callback that set touchMobileEvent back to false rather than triggering a click event. I also turned it back to false when a doubleclick event was triggered:
Creating variable to check if a touchMobileEvent is taking place:
var touchMobileEvent = false;
Setting events on my marker:
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;
});
Setting events on my map:
google.maps.event.addListener(map, 'click', function(e){
if (touchMobileEvent) {
touchMobileEvent = false;
} else {
mapClickEvent();
});
Hope that helps. I recommend examining the various events that are being triggered/caught from within each callback. My original mistake was in assuming that the event listeners were interacting with the same event (when in actuality I was stopping propagation of a MouseEvent, but not doing anything about the TouchEvent that was created on mobile).
这篇关于stopEventPropagation不适用于移动Safari或Chrome开发工具仿真的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
