Question

我正在按空格键按下keydown，并立即删除同一个监听器。在keyup我正在重新设置听众。回调函数在主体上设置一个类，该类应该导致自定义光标显示。但随着空格键被按下，定制＆＃34;抓住＆＃34;光标仅在鼠标处于运动状态时显示，并且当鼠标处于静态位置时，根本不显示任何CSS光标（！）。这当然是出乎意料的，但FF和Chrome的行为都是一样的，所以我可能做错了。没有通常的＆＃34;力渲染＆＃34;技巧对我有用。非常感谢帮助。

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

想出来：空格键的默认行为是向下滚动。这会导致光标在滚动期间暂时消失。如果您按住空格键，窗口将停在页面底部，基本上隐藏空格键，除非鼠标/指针处于运动状态。解决方案就是在窗口级别吃空格键：

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

空格键上的自定义CSS光标消失按住

1 个答案: