Как я могу обнаружить событие нажатия клавиши вверх / вниз в любом месте элемента?

Question

Если я нахожусь в textarea, я могу сделать что-то вроде:

    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault()      return
    }

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

Answer 1

Событие всплывает по умолчанию, если вы не используете e.stopPropagation():

document.getElementsByTagName('textarea')[0].addEventListener('keyup', function(e) {
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault();
      return;
    }
});

document.getElementsByTagName('div')[0].addEventListener('keyup', function(e) {
    console.log('Bubbled');
});

<div>
  <textarea>
  </textarea>
</div>

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

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

• defaultPrevented свойство события DOM доступно только для чтения, и не существует такого метода, как restoreDefault: Как вызвать событие после использования event.preventDefault ()
• Если вы вручную запускаете новое событие, оно не будет генерировать действие по умолчанию, связанное с этим событием: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Auto -repeat_handling_prior_to_Gecko_5.0

Таким образом, вы должны реализовать поведение прокрутки сами (что, на мой взгляд, приведет к странному поведению для большинства пользователей).

Answer 2

Вы можете просто поместить onKeyPress в родительский элемент div, пока textarea является большим дочерним элементом, а вы не выполняете event.stopPropagation()

<div onkeypress="keyPress(event)">
<textarea>sample text area</textarea>
</div>

<script>
function keyPress(event) {
  alert(event.keyCode);
}
</script>