Почему мой слушатель событий фокус / синий не срабатывает? - PullRequest
Новая
       8

Почему мой слушатель событий фокус / синий не срабатывает?

0 голосов
/ 18 апреля 2020

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

const elm = (this.agGridElm.nativeElement as HTMLElement);
elm.addEventListener('focus', (focusEvent: FocusEvent) => {
  elm.classList.add('focused');
}, { capture: true, passive: true });

elm.addEventListener('blur', (focusEvent: FocusEvent) => {
  elm.classList.remove('focused');
}, { capture: true, passive: true });

Я пытался с третьим аргументом или без него { capture: true, passive: true } и результат тот же ... Странно то, что я могу видеть, как мои слушатели регистрируются, когда я наблюдаю в Chrome отладчике Event Listeners, нажимая на свой элемент, я мог видеть и focus, и blur были подключены, но просто не сработали.

Я сделал что-то подобное с mouseleave, и это сработало безупречно, так что же с focus и blur? Блок ниже работал ... 

elm.addEventListener('mouseleave', (mouseEvent: MouseEvent) => {
  console.log('Hi there!');
});

1 Ответ

0 голосов
/ 19 апреля 2020

Оказывается, причина в том, что для focus, размытия, focusin и focusout на элементе div им требуется tabindex для фокусировки для работы !! Решение состоит в том, чтобы добавить следующее к элементу, который я буду sh слушать. 

<div tabindex="-1"></div>

Весь мой код работал с tabindex!

...