自定义 CSS 光标在按住 space 条时消失

Question

我正在监听 keydown 按空格键，并立即删除同一个监听器。在 keyup 我再次设置监听器。回调函数在正文上设置一个 class 应该导致自定义光标显示。但是在按住空格键的情况下，自定义“抓取”光标仅在鼠标移动时显示，而在鼠标处于静止位置时根本不显示 CSS 光标（！）。这当然是出乎意料的，但是 Firefox 和 Chrome 的行为方式相同，所以我可能做错了什么。 None 常用的“强制渲染”技巧对我有用。非常感谢帮助。

http://codepen.io/anon/pen/XbzeeE

并且，为了记录，html：

<div id="plot"></div>

与 CSS:

html, body {
    height: 100%;
}

body {
    background: gray;
    display: flex;
  align-items: center;
    margin: 0;          
}

#plot {
    background: #fff;
    box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
    margin: 0 auto;
    width: 500px;
    height: 400px;
}

.space-bar-depressed > #plot {
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

和 js:

var body = document.body;
var plot = document.getElementById("plot");

var handleSpaceKeyDown = function(e) {
    var key = e.which;
    e.preventDefault();
    e.stopPropagation();    

    if (key == 32 ) {
        body.classList.add("space-bar-depressed");
        body.removeEventListener("keydown", handleSpaceKeyDown, false);
    }
}

body.addEventListener("keydown", handleSpaceKeyDown, false);

body.addEventListener("keyup", function(e) {
    var key = e.which;
    if (key === 32 ) {
        body.classList.remove("space-bar-depressed");
        body.addEventListener("keydown", handleSpaceKeyDown, false);
    }
});

Answer 1

明白了：space 栏的默认行为是向下滚动。这会导致光标在滚动过程中暂时消失。如果您按住 space 栏，window 将停在页面底部，基本上隐藏 space 栏，除非 mouse/pointer 处于运动状态。解决方法就是在window级吃掉space条键：

window.addEventListener("keydown", function(e) {
 return !(e.which === 32)
});

自定义 CSS 光标在按住 space 条时消失

Custom CSS cursor disappears on space bar press and hold

javascript

css

dom-events