1

このプラグインを使用して、サイトのフラッシュビデオを全画面表示にします。フルスクリーンが正しく機能するように、ユーザーがボタンをクリックしてフルスクリーンに出入りするときに、JavaScriptを使用してdivのフルスクリーンクラスを追加および削除しています。

ユーザーがボタンの代わりにエスケープキーを使用してフルスクリーンモードを終了すると、わずかな問題が発生します。エスケープキーを使用すると、フルスクリーンクラスが削除され、レイアウトが少し外れます。エスケープキーを使用してフルスクリーンを終了し、フルスクリーンクラスを削除するタイミングを検出する方法はありますか？

また、私はjavascriptコーダーではないので、多くの助けをいただければ幸いです。

4

2 に答える 2

3

フルスクリーンモードを終了するときに、Chromeはキーイベントを発生させません。このように、フルスクリーンモードへの変更をリッスンするイベントリスナーを定義する必要があります（これは十分に標準化されていないため、さまざまなブラウザーによって発生するイベントをリッスンする必要があります）。

    if (document.addEventListener) {
        document.addEventListener('webkitfullscreenchange', exitHandler, false);
        document.addEventListener('mozfullscreenchange', exitHandler, false);
        document.addEventListener('fullscreenchange', exitHandler, false);
        document.addEventListener('MSFullscreenChange', exitHandler, false);
    }

次に、このイベントがブラウザによって発生すると、定義した「exitHandler」関数が呼び出されます。ユーザーがフルスクリーンモードを終了するときに、次の手順を実行することで、divからクラスを削除できます。

function exitHandler() {
    if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        var myDiv = document.getElementById("myDivId");
        myDiv.classList.remove("fullscreen");
    }
}
于 2017-09-12T04:59:32.763 に答える
0

ドキュメントにイベントをバインドできます

document.addEventListener('keyup', function(e){ 

    if(e.which == 27){
          //add remove class.
     }
})
于 2013-03-17T20:12:09.370 に答える