Заставка JavaScript не обнаруживает движения во встроенном контенте - PullRequest
Новая
       29

Заставка JavaScript не обнаруживает движения во встроенном контенте

0 голосов
/ 18 июня 2019

Я использую заставку (просто наложение div) для страницы, которая использует встроенный контент.Тем не менее, навигация по встроенному контенту / странице по-прежнему активирует заставку, которая, в свою очередь, блокирует всю страницу.Мне интересно, есть ли способ по-прежнему обнаруживать движение / прокрутку мыши и сохраняет ли экранную заставку скрытой до тех пор, пока не будет вообще никакого движения мыши.

Codepen: https://codepen.io/anon/pen/PrGYrE

var mousetimeout;
var screensaverActive = false;
var idletime = 1; // in seconds. in real world this will be longer

function showScreensaver(){
    $('#screensaver').fadeIn(800);
    screensaverActive = true;
}

function stopScreensaver(){
    $('#screensaver').fadeOut(800);
    screensaverActive = false;
}


$('#screensaver').click(function(e){
  if (screensaverActive) {
    stopScreensaver();
  }
});

$(document).mousemove(function(){
  clearTimeout(mousetimeout);

  mousetimeout = setTimeout(function(){
      showScreensaver();
  }, 5000 * idletime); // 5 secs
});
#screensaver{
  position:absolute;
  width:100%;
  height:100%;
  left:0px;
  top:0px;
  display:none;
  background-color:red;
}

embed {
  width:100%;
  bottom:0;
  height:30%;
}
<h1>Simple JS Screensaver</h1>

<p>Background will randomly change color after 5 seconds on idle mouse. 
Background will revert back to white when detects a mouse move again.
</p>

<embed src="http://codepen.io">


<div id = "screensaver"></div>
...