Question

我想在窗口全宽时隐藏光标，一旦点击esc键按钮，我的鼠标光标就会出现。

我使用以下代码显示/隐藏光标并显示窗口全宽。

 function toggleFullScreen(elem) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
             document.body.style.cursor = 'none'; // to hide cursor
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
            document.body.style.cursor = 'none'; // to hide cursor
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            document.body.style.cursor = 'none'; // to hide cursor
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
            document.body.style.cursor = 'none'; // to hide cursor
        }
    } else{
        document.body.style.cursor = 'default'; // to show cursor
        console.log('test');
    }
}

HTML：

<body oncontextmenu="return false;" onkeydown="return false;" onmousedown="return false;" onclick="toggleFullScreen(document.body)">
</body>

CSS：

body {
    BACKGROUND: #000080;
    color: #fff;
    font-family: 'Yantramanav', sans-serif;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    overflow:hidden;
  }

Answer 1

执行此操作的最佳方法是挂钩fullscreenchange事件，然后检查document.fullscreenElement。

基本思想是checkFullscreen无论用户如何进入或退出全屏模式都会运行，因此这将允许您在更改时隐藏/显示光标。

有几种方法可以挂钩事件，但为了简单起见，我会坚持使用您在代码中使用的方法。

<body onclick="toggleFullScreen(document.body)" onfullscreenchange="checkFullscreen"></body>

function toggleFullscreen(elem) { // simplified
  if (document.fullscreenElement) {
    elem.requestFullscreen();
  }
  else {
    document.exitFullscreen(); // changed
  }
}

function checkFullscreen() { // added
  if (document.fullScreenElement) {
    document.body.style.cursor = 'none';
  }
  else {
    document.body.style.cursor = 'default';
  }
}

您必须添加浏览器前缀内容，但这应该指向正确的方向。您可以在fullscreen mode的MDN页面上找到更多信息。

当窗口不是全宽时，Javascript显示光标

1 个答案: