Почему не срабатывает событие onfullscreenchange при нажатии F11?

206

08 июля 2018, 23:00

<html>
<body>
<script>
  document.addEventListener("webkitfullscreenchange", function FS(event){console.log("FULL SCREEN CHANGE")}, false);  
  document.addEventListener("mozfullscreenchange", function (event){console.log("FULL SCREEN CHANGE")}, false); 
  document.addEventListener("MSFullscreenChange", function (event){console.log("FULL SCREEN CHANGE")}, false); 
  document.addEventListener("fullscreenchange", function (event){console.log("FULL SCREEN CHANGE")}, false); 
</script>
</body>
</html>

Такой код реагирует на requestFullscreen и cancelFullScreen, но если нажимать F11 консоль остается пустой.

Answer 1

У F11 Event: keydown, который надо ловить.

document.addEventListener('keydown', function(e) { 
  e.preventDefault(); 
  // Do what ever you need here... 
  if (e.keyCode === 122) // F11 pressed 
    console.log(e.keyCode); 
})

.clk { 
  width: 300px; 
  height: 300px; 
  border: 1px solid black; 
  padding: 20px; 
} 
 
kbd { 
  background: #ccc; 
  padding: .2em; 
}

<div class="clk"> 
  <p>Кликнуть в квадрате для срабатывания скрипта, потом нажать <kbd>F11</kbd>.</p> 
  <p>Кликнуть в квадрате для срабатывания скрипта, потом нажать <kbd>F11</kbd>.</p> 
  <p>Кликнуть в квадрате для срабатывания скрипта, потом нажать <kbd>F11</kbd>.</p> 
</div>