粘性光标，谷歌地图嵌入在iframe(webkit浏览器和IE)

Question

当我将它们嵌入到iframe中时，我在使用谷歌地图（api v3）时遇到了一些问题。

当我单击地图上的某处时，拖动它直到光标离开 iframe，然后释放鼠标按钮，然后当我在地图上移动地图时，即使我不再按鼠标按钮，地图也会粘在光标上。

http://my.brandtr.ee/public/tmp/test-iframe.html

似乎如果地图嵌入在 iframe 中，则当用户在 iframe 外部释放鼠标按钮时，地图不会捕获"mouseup"事件。此问题仅发生在webkit浏览器（chrome 23，safari 6）和IE上。火狐工作正常。

有人已经遇到这个问题了吗？它已经困扰了我好几天了...

提前谢谢。

Answer 1

我不完全确定谷歌地图依靠什么事件来停止拖动地图，但只是在玩你的演示时，我注意到当你mouseup在 iframe 内时它会停止。如果您在 iframe mouseout上模拟此事件，Google 地图会认为您放开了那里的地图，并停止拖动。

我从控制台内部尝试了此代码，它工作正常：

var iframe = document.getElementsByTagName('iframe')[0];
iframe.addEventListener('mouseout', function(e){
    var doc = this.contentDocument || this.contentWindow; // wk/moz vs. ie
    doc = doc.document || doc; // opera
    if (doc.createEvent) {
        var evt = doc.createEvent('MouseEvents');
        evt.initMouseEvent('mouseup', true, false, window, 
            0, e.screenX, e.screenY, e.clientX, e.clientY, 
            false, false, false, false, 0, null
        );
        doc.getElementsByTagName('body')[0].dispatchEvent(evt);
    } else if (doc.createEventObject) { // legacy ie
        var evt = doc.createEventObject(e);
        doc.getElementsByTagName('body')[0].fireEvent('mouseup', e);
    }
});

这适用于FF，Safari，Chrome和Opera。我在IE中快速浏览了您的页面，但没有应用该修复程序。但是，看起来拖拽错误甚至没有发生在那里，因此可能不值得为这种情况提供。祝你好运！