强制图层重绘

Question

我有一个在 Ubuntu 服务器 14.04.3 和 chrome 上运行的自助服务终端应用程序。目前我有一些代码，如果 2 秒内没有移动，则隐藏鼠标，一旦用户尝试再次移动鼠标，它就会再次显示。诀窍是使用cursor:none 并添加叠加层：

js:

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;
}

此代码运行良好，但只有 1 个警告。当页面第一次加载时，它试图用同样的技巧隐藏鼠标，但鼠标仍然粘在那里，因为它只是没有重新绘制我猜的图层。如果我想让它工作，我必须稍微移动鼠标，然后它将按预期工作并隐藏鼠标。问题是信息亭应用程序每天都在重新启动，这意味着我再次启动 X 显示器，并且鼠标被重置到屏幕中间，并且它一直停留在那里，直到我稍微移动它。我希望你明白我的意思。

你们知道我该如何解决这个问题吗？

Answer 1

你不需要所有的代码来做你想做的事。你可以这样做：

1. 创建setTimeout，页面加载后2s后立即隐藏光标

2. 当有人移动鼠标时，你：

   2.1。再次显示光标

   2.2。清除当前setTimeout

   2.3。并创建setTimeout在2s后再次隐藏光标。

下面的代码应该适合你：

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>