Обнаружение ключевого события при наведении курсора на элемент DOM

Я знаю, как обнаруживать ключевые события в document. Я также знаю, как обнаруживать события mousemove в элементе DOM.

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

Я думаю, я мог бы установить логическое значение, которое будет установлено в true с помощью mousemove и в false с помощью mouseout в элементе DOM. Но есть ли более правильный способ сделать это?

Я нашел вопрос, который имеет прямое отношение, но без ответа (и комментарии на самом деле не помогают):

Обнаружение клавиши Shift уже над элементом


javascript mousemove keydown mouseout
person Daniel    schedule 28.03.2017    source источник
comment
Вы пытались настроить прослушиватель событий для наведения курсора на элемент, а затем иметь прослушиватель событий нажатия клавиши внутри прослушивателя событий наведения?   -  person Runny Yolk    schedule 28.03.2017
comment
Если этот проект предназначен для какой-либо другой аудитории, кроме вас, учитывайте последствия доступности. Это будет невыполнимая задача для программ чтения с экрана и интерфейсов без мыши. Также трудно донести до пользователя доступность.   -  person Joe Frambach    schedule 28.03.2017
comment
@JoeFrambach, мы не вправе рассматривать вариант использования вопроса, если только он не связан с чем-то незаконным. Что, если он случайно попытается использовать эту механику для игры, а не для веб-сайта? Не все всегда должно быть или даже может быть доступно для всех.   -  person Ryan    schedule 29.03.2017
comment
Эй, это просто комментарий. В разделе комментариев.   -  person Joe Frambach    schedule 29.03.2017
comment
@RunnyYolk Спасибо. Я не уверен, как понять ваше предложение, хотя. Как поместить слушателя внутрь другого? Я знаю только, как добавить слушателя к элементу.   -  person Daniel    schedule 29.03.2017
comment
@JoeFrambach Спасибо. Хорошая точка зрения. Но я пытаюсь показать элемент SVG в позиции мыши внутри SVG. Не для игр, а для рисования. Поэтому я думаю, что программы для чтения с экрана и интерфейсы без мыши здесь не имеют значения.   -  person Daniel    schedule 29.03.2017

Ответы (1)


arrow_upward
2
arrow_downward

Вот расширение моего комментария выше.

Используя ванильный JavaScript, вы можете установить прослушиватели событий для элемента для onmouseover и onmouseleave. Эти прослушиватели событий переключают логическую переменную, которая является просто флагом, указывающим, находится ли мышь в данный момент над элементом или нет.

Затем добавьте еще один прослушиватель событий в окно для нажатий клавиш. При нажатии клавиши, если наше логическое значение истинно, запустите свой код, если нет, ничего не делайте.

var mouseOn = false;

document.getElementById('div').onmouseover = function() {
    console.log('mouseover');
    mouseOn = true;
}

document.getElementById('div').onmouseleave = function() {
    console.log('mouseleave');
    mouseOn = false;
}

window.onkeypress = function(e) {
    if(mouseOn == true) {
    console.log(e.key)
  }
}

Вот скрипт: https://jsfiddle.net/6wpeLbx9/ (примечание: объект окна в скрипте это просто панель, содержащая красный квадрат - чтобы нажатия клавиш были замечены, вам сначала нужно щелкнуть по панели, чтобы сфокусировать ее)

Я уверен, что мой код может быть более кратким...

Надеюсь, это поможет!

person Runny Yolk    schedule 29.03.2017