Question

我在Ubuntu服务器14.04.3和 chrome 上运行了一个kiosk应用程序。目前我有一些代码可以隐藏鼠标，如果没有移动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

您不需要所有代码来执行您想要的操作。你可以这样做：

创建setTimeout以便在加载页面后2秒后隐藏光标
当有人移动鼠标时，您：

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>

强制重绘图层

1 个答案: