Holding down spacebar causes the mouse pointer to disappear
My web app has keyboard shortcuts that include holding down the spacebar. The problem is that the mouse cursor disappears when holding down the spacebar. I think what is happening is that the browser is trying to scroll down (although there is never anything to scroll down in my case). If the user moves the mouse cursor while holding down the spacebar, the cursor flickers in the field of view, but only disappears again when the mouse stops moving. When the user releases the space, the mouse cursor remains hidden until the mouse is moved again, after which the cursor remains visible. This happens in Chrome, Safari, Opera (webkit / blink).
Among many things, I've tried the canonical solution preventDefault()
on an event that doesn't work no matter where I'm listening. Clearly this is possible because I've used apps before, using the space bar to do something other than scrolling down.
var html = document.documentElement;
var body = document.getElementsByTagName('body')[0];
document.addEventListener("keydown", function(e) {
console.log("document keydown");
e.preventDefault();
e.stopPropagation();
});
window.addEventListener("keydown", function(e) {
console.log("window keydown");
e.preventDefault();
e.stopPropagation();
});
html.addEventListener("keydown", function(e) {
console.log("html keydown");
e.preventDefault();
e.stopPropagation();
});
body.addEventListener("keydown", function(e) {
console.log("body keydown");
e.preventDefault();
e.stopPropagation();
});
document.addEventListener("keypress", function(e) {
console.log("document keypress");
e.preventDefault();
e.stopPropagation();
});
window.addEventListener("keypress", function(e) {
console.log("window keypress");
e.preventDefault();
e.stopPropagation();
});
html.addEventListener("keypress", function(e) {
console.log("html keypress");
e.preventDefault();
e.stopPropagation();
});
body.addEventListener("keypress", function(e) {
console.log("body keypress");
e.preventDefault();
e.stopPropagation();
});
Note. My application is always 100% of the viewport. There is never any reason for scrolling, so I love the idea of overriding the convention.
Any help is greatly appreciated.
source to share
TL / DR: Apply style overflow: hidden
to document.body.
I just found this unanswered question (!!) after the same problem but found my solution after 5 minutes.
For several years there is no answer, so I will explain my situation too, because it must be a rare context.
My scenario: Developing a full page graphics application using PIXI and overlaid HTML DOM elements. Using Safari on MacBook Pro.
Interest: press space to interact with PIXI content
Approach: Use a stateful tracking variable using keydown and keyup listeners . Press spacebar, in keydown update the style cursor
when the event target is document.body. Likewise, cursor
revert the style to keyup.
Problem: The browser wants to scroll. Even when used event.preventDefault
.
I never use spacebar to scroll the page, so I completely ignored browser behavior.
Discovery: By experimenting on other pages, including here in the SO question, I found that the cursor stops being hidden when the spacebar is pressed while it is at the bottom of the page. So I know that the browser takes into account the body length ...
Solution: apply style overflow: hidden
to document.body.
Now I know that for various applications this may not be enough, but for me it solves this problem. The browser knows that there is no null overflow handling on the body, so the space is inert for scrolling.
After applying this overflow elsewhere, it still works: other elements of the web application can scroll, with dimensions assigned.
source to share