當從全屏按下退出時更改CSS類

我正在使用this plugin在我的網站上製作Flash動畫轉到全屏顯示。爲了讓全屏正常工作，我還使用一些JavaScript來在用戶單擊按鈕進入和退出全屏時在div上添加和刪除全屏類。當從全屏按下退出時更改CSS類

當用戶使用退出鍵退出全屏模式而不是按鈕時，我遇到了一個小問題。當使用退出鍵時，全屏類將被刪除，從而引發佈局。有沒有辦法檢測退出鍵何時用於退出全屏，然後刪除全屏類？

另外我不是一個JavaScript編碼器，所以很多的幫助將不勝感激。

2013-03-17 tcherokee

您可以在文檔

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

    if(e.which == 27){ 
      //add remove class. 
    } 
})

來源

2013-03-17 20:12:09 Anoop

這工作，雖然我不得不改變addEventListener綁定。這是給addEventListener一個未被捕獲的錯誤。 b非常感謝:)。 – tcherokee 2013-03-18 10:42:43

綁定事件退出全屏模式時，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-12 04:59:32

當從全屏按下退出時更改CSS類

回答

相關問題