移动Safari中的Google Maps v3 InfoBox事件传播 [英] Google Maps v3 InfoBox Event Propagation in Mobile Safari

问题描述

我使用google maps api v3和 infoBox 来自地图实用程序库。信息框具有溢出数据。滚动功能与IE，FF，Chrome和Safari桌面上的预期完全相同。但是，在移动Safari中，滚动根本不起作用。就好像infoBox没有检测到触摸开始滚动一样。

I have created an infobox using google maps api v3 and infoBox from the maps utility library . The infobox has overflow-y data. Scrolling works exactly as expected on IE, FF, Chrome and Safari desktop. Scrolling does not work at all, however, in mobile Safari. It's almost as if the infoBox doesn't detect a touch to start scrolling.

我已将此 jsfiddle 创建为证明问题。正如你所看到的（在iOS模拟器或iOS设备上），mouseenter，touchstart，mouseleave和touchend事件正在触发得很好;只是没有办法向下滚动查看溢出文本。

I've created this jsfiddle to demonstrate the problem. As you can see (in the iOS simulator or on an iOS device), the mouseenter, touchstart, mouseleave and touchend events are being triggered just fine; it's just that there is no way to scroll down to see the overflow text.

我一直都在为这一周苦苦挣扎。任何帮助将不胜感激！

I've been struggling with this all week. Any help would be greatly appreciated!

Chuck

推荐答案

不知道这是移动Safari（很可能），infobox.js或谷歌地图中的错误，但由于某种原因，如果在该信息框中启用了事件传播，则在移动Safari中的信息框内滚动不起作用。启用事件传播时，滚动功能可在其他浏览器（FF，Chrome和桌面Safari）中使用。另外，滚动在移动Safari浏览器中工作得很好，事件传播已关闭，用于信息框。

I don't know if it's a bug in mobile safari (pretty likely), infobox.js, or google maps, but for some reason, scrolling won't work inside an infobox on mobile safari if event propagation is enabled on that infobox. Scrolling will work in other browsers (FF, Chrome and desktop Safari) when event propagation is enabled. Also, scrolling works just fine in mobile safari with event propagation turned off for the infobox.

因此，我用来解决这个问题的破解只是为了确定客户端是iOS浏览器，然后相应地设置事件传播。我知道这种做法很不合理，但这是我能想到的最好的方法。请参阅此小提琴，以确认它适用于移动Safari和其他浏览器。另外，请确保您使用的是最新版本的infobox.js（1.1.11）。

So, the hack that I used to solve this problem was simply to determine whether the client was an iOS browser and then set event propagation accordingly. I know that this approach is hackie, but it was the best that I could come up with. See this fiddle for confirmation that it works in both mobile safari and other browsers. Also, make sure that you're using the most recent version of infobox.js (1.1.11)

这篇关于移动Safari中的Google Maps v3 InfoBox事件传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！