@andrei_pro

Обработка нажатия клавиши в области?

Всем привет.
Есть такая страница:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html, body {
        margin: 0;
        padding: 0;
    }
    .nav {
        position: absolute;
        height: 50px;
        background: #1b4b72;
        width: 100%;
    }
    #wrapper {
        position: absolute;
        top: 50px;
        bottom: 0;
        left: 100px;
        right: 0;
        overflow: auto;
        width: 1000px;
    }
    #container {
        position: absolute;
        left: 0;
        width: 2000px;
        height: 2000px;
        background: #e2f0fb;
    }
    #container.info {
        padding: 50px;
    }
</style>
<body>
    <div class="nav"></div>
    <div id="wrapper">
        <div id="container" class="info">
            <input type="text" placeholder="text" /> Text
        </div>
    </div>

<script>
    document.documentElement.addEventListener('keydown', (e) => {
        if (e.which === 32) {
            // e.preventDefault()

            // logic
        }
    })
</script>
</body>
</html>


При наведении на область #container и нажатии пробел происходит стандартное событие скролл вниз. Мне нужно его отключить, для этого ставлю preventDefault, однако проблема что у всех элементов внутри не работает пробел. Как поправить?
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ответы на вопрос 2
hzzzzl
@hzzzzl
предлагаю попробовать так:

1) при евенте mousemove сохранять "последнее" положение курсора мыши (оно нам пригодится, потому что из клавиатурных событий до позиции мыши нельзя добраться)
https://stackoverflow.com/questions/7562503/gettin...
2) при keydown проверять, какой элемент страницы соответсвует последнему сохраненному курсору через document.elementFromPoint(x, y)
https://stackoverflow.com/questions/8813051/determ...
3) сравнивать этот найденный элемент с #container
Ответ написан
Комментировать
Paul_Smith
@Paul_Smith
const containerNode = document.getElementById("container");
document.documentElement.addEventListener('keydown', (e) => {
        if (e.which === 32 && containerNode.matches(':hover')) {
             e.preventDefault()
        }
    })
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы