Принудительный перекрашивание слоя

У меня есть приложение для киоска, работающее на сервере Ubuntu 14.04.3 и chrome. В настоящее время у меня есть код, который скрывает мышь, если не было движения в течение 2 секунд, и как только пользователь попытается переместить мышь снова, он снова появится. Хитрость заключается в использовании cursor:none и добавления наложения:Принудительный перекрашивание слоя

ЯШ:

var body = $('body'); 
function hideMouse() { 
    body.addClass("hideMouse"); 

    body.on('mousemove', function(){ 

     if(window.hiding) return true; 
     window.hiding = true; 
     body.removeClass("hideMouse"); 
     $('div.mouseHider').remove(); 
     clearTimeout(window.hideMouse); 
     window.hideMouse = setTimeout(function(){ 
      body.addClass("hideMouse"); 
      $('<div class="mouseHider"></div>').css({ 
       position: 'fixed', 
       top: 0, 
       left: 0, 
       height: '100%', 
       width: '100%', 
       zIndex: 99999 
      }).appendTo(body); 
      redraw(document.body); 
      setTimeout(function(){ 
       window.hiding = false; 
      }, 100); 
     }, 4000); 
    }); 
} 

function redraw(e) { 
    e.style.display = 'none'; 
    e.offsetHeight; 
    e.style.display = 'block'; 
}

CSS:

body.hideMouse *, body.hideMouse{ 
    cursor: none; 
} 
body.hideMouse *{ 
    pointer-events: none !important; 
}

Этот код работает прекрасно, но есть только один нюанс. Когда первая загрузка страницы пытается скрыть мышь с помощью той же трюки, но мышь все еще торчит там, так как она просто не перекрасила слой, который я предполагаю. Если я хочу, чтобы он работал, мне нужно немного потянуть мышь, и с этого момента он будет работать так, как ожидалось, и спрятать мышь. Дело в том, что приложение киоска перезапускается каждый день, что означает, что я снова загружаю X-образ, и мышь сбрасывается в середину экрана, и он просто держится там, пока я не переместил его немного. Надеюсь, вы понимаете, что я имею в виду.

Вы, ребята, знаете, как я могу это исправить?

источник

2015-09-29 kfirba

Вам нужно, что когда нагрузка приложения, но пользователь does't переместить мышь, то курсор должен скрывать по истечении заданного время? –

Обычно, когда вы наводите курсор на курсор, вы хотите назвать его как селектор: 'selector {cursor: none; } ' –

Как вы называете' hideMouse() '? –

Вам не нужен весь этот код, чтобы делать то, что вы хотите. Вы можете сделать:

Создать setTimeout скрыть курсор после 2s, как только страница загружена
Когда кто-то перемещает мышь, вы:

2.1. Показать курсор еще раз

2.2. Очистить ток setTimeout

2.3. И создайте setTimeout, чтобы скрыть курсор после 2 секунд.

ниже код должен работать для вас:

document.addEventListener('DOMContentLoaded', function() { 
 
    var cursorNone = document.getElementById('cursor-none'); 
 
    
 
    var t = setTimeout(hideMouse, 2000); 
 

 
    document.addEventListener('mousemove', function(e) { 
 
    showMouse(); 
 
    clearTimeout(t); 
 
    t = setTimeout(hideMouse, 2000); 
 
    }); 
 

 
    function hideMouse() { 
 
    cursorNone.classList.remove('hidden'); 
 
    } 
 

 
    function showMouse() { 
 
    cursorNone.classList.add('hidden'); 
 
    } 
 
});

#cursor-none { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    cursor: none; 
 
    background-color: transparent; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<body> 
 
    <div id="cursor-none" class="hidden"></div> 
 
</body>

источник

2015-09-29 16:56:30 Buzinas

Я не уверен, почему, но это просто не работает. Я все еще вижу мышь. Я дважды проверял, и код должен быть в порядке. Оверлейный div фактически отображается, когда это необходимо, и скрывается при необходимости, но мышь просто игнорирует его и отображается. – kfirba

Принудительный перекрашивание слоя

ответ

Смежные вопросы