Как отследить фокус самого браузера в JavaScript - PullRequest
Новая
       157

Как отследить фокус самого браузера в JavaScript

0 голосов
/ 22 октября 2019

Я реализую функцию панорамирования, где вы можете панорамировать, удерживая пробел и щелкая, чтобы перетащить. Ниже приведен упрощенный пример того, как работает мой код.

Проблема заключается в том, что если сам браузер теряет фокус перед освобождением пробела, то окно все еще прослушивает события mousedown и не прекращает прослушивание до тех пор, покаПробел снова нажимается и отпускается.

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

Есть ли способ отследить, когда сам браузер теряет / восстанавливает фокус? Или есть способ получить доступ к списку всех нажатых в настоящее время клавиш за пределами прослушивателя событий?

Если это невозможно, моим пользователям, возможно, придется с этим справиться. 

const spacebarDown = ({ key }) => {
    if (key === ' ') {
        const startPanning = e => {
            // some code to track mouse location
            const pan = e => {
                // some code to compare mouse location and apply translation to element
            }
            const stopPanning = e => {
                window.removeEventListener('mousemove', pan);
            }
            window.addEventListener('mousemove', pan);
            window.addEventListener('mouseup', stopPanning);
        }
        const spacebarUp = ({ key }) => {
            if (key === ' ') window.removeEventListener('mousedown', startPanning);
        }
        window.addEventListener('mousedown', startPanning);
        window.addEventListener('keyup', spacebarUp);
        window.addEventListener('blur', spacebarUp);
        document.addEventListener('visibilitychange', spacebarUp);
    }
}
window.addEventListener('keydown', spacebarDown);

1 Ответ

0 голосов
/ 22 октября 2019

Если вы просто хотите проверить, есть ли у документа фокус, попробуйте document.hasFocus ();

Вот более подробное объяснение:

https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus https://www.w3schools.com/jsref/met_document_hasfocus.asp

Вторая ссылка имеет живой пример с кодом: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_hasfocus

Однако вы не можете проверить, имеет ли сам браузер (приложение) фокус из Интернета, это было быУгроза безопасности

...