Удержание пробела вызывает исчезновение курсора мыши

Question

В моем веб-приложении есть сочетания клавиш, которые включают нажатие клавиши пробела. Проблема в том, что курсор мыши исчезает, когда удерживается клавиша пробела. Я думаю, что происходит то, что браузер пытается прокрутить вниз (хотя в моем случае никогда ничего не прокручивать вниз). Если пользователь перемещает курсор мыши, удерживая клавишу пробела, курсор мигает в поле зрения, только чтобы снова исчезнуть, когда мышь перестала двигаться. Как только пользователь отпускает пробел, курсор мыши остается скрытым до тех пор, пока мышь не будет снова перемещена, после чего курсор останется видимым. Это происходит в Chrome, Safari, Opera (webkit/blink).

Среди многих вещей я пробовал каноническое решение preventDefault() на событие, которое не работает, независимо от того, где я слушаю. Понятно, что это возможно, потому что раньше я использовал приложения, которые используют пробел, чтобы делать что-то другое, чем прокрутка вниз.

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();
});

Примечание. Мое приложение всегда занимает точно 100% области просмотра. Нет никаких причин для прокрутки, поэтому мне нравится идея отмены конвенции.

Любая помощь очень ценится.

Answer 1

TL/DR: применить overflow: hidden стиль на document.body.

---

Я только что нашел этот вопрос без ответа (!!) здесь после той же проблемы, но через 5 минут нашел свое решение.

Несколько лет без ответа, поэтому я объясню и свою ситуацию, потому что это, должно быть, редкий контекст.

Мой сценарий: Разработка полностраничного графического приложения с использованием PIXI вместе с наложенными элементами HTML DOM. Использование Safari на MacBook Pro.

Интерес: нажмите пробел для взаимодействия с контентом PIXI

Подход: используйте переменную отслеживания состояния с использованием прослушивателей keydown и keyup. Нажмите пробел, при нажатии клавиши обновитеcursorstyle, когда целью события является document.body. Аналогично вернутьсяcursor стиль в клавиатуре.

Проблема: браузер хочет прокрутить. Даже при использованииevent.preventDefault.

Я никогда не использую пробел для прокрутки страницы, поэтому я был полностью слеп к существующему поведению браузера.

Открытие: экспериментируя на других страницах, в том числе здесь, по вопросу SO, я обнаружил, что курсор перестает быть скрытым при нажатии клавиши пробела, когда он находится внизу страницы. Итак, я знаю, что браузер учитывает длину тела...

Решение: применитьoverflow: hidden стиль на document.body.

Теперь я знаю, что для различных приложений этого может быть недостаточно, но это РЕШЕНИЕ для меня. Браузер знает, что в теле отсутствует обработка переполнения, поэтому пробел инертен для прокрутки.

После его применения переполнение в другом месте по-прежнему работает: другие div веб-приложения все еще могут прокручиваться с заданными размерами.