3

Google マップ (API v3) を iframe に埋め込むと、問題が発生します。

マップ上のどこかをクリックして、カーソルが iframe の外に出るまでドラッグし、マウス ボタンを放すと、マウス ボタンを押していなくても、マップ上でカーソルを移動すると、マップがカーソルにくっつきます。もう。

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

マップが iframe 内に埋め込まれている場合、ユーザーが iframe の外でマウス ボタンを放した場合、「mouseup」イベントはマップによってキャッチされないようです。この問題は、Webkit ブラウザー (chrome 23、safari 6) および IE でのみ発生します。Firefox は正常に動作しています。

誰かがすでにこの問題を抱えていますか？もう何日も悩まされています...

前もって感謝します。

4

1 に答える 1

2

マップのドラッグを停止するためにGoogleマップがどのイベントに依存しているかは完全にはわかりませんが、デモをいじってみるmouseupと、iframe内にいると停止することに気付きました. このイベントをmouseoutiframe でシミュレートすると、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 でページをざっと見ました。ただし、ドラッグ バグがそこで発生しているようには見えないため、その場合に提供する価値はないかもしれません。幸運を！

于 2012-12-20T18:09:13.690 に答える