Почему не работает событие keydown на диве?

Question

[danilr]

Есть попап, который открывается на всю страницу по высоте и ширине, на обёртку навесил обработчик@keydown="closePictBuildingPopupSELF", но это событие просто не срабатывает.
Задача в следующем - чтобы попап закрывался на escape, а слайдер(самописный) в нём реагировал на кнопки влево и вправо.
Вопрос именно в том - почему не срабатывает событие, ведь блок на весь экран?
И как правильно сделать, ведь у меня мысль чтобы навесить обработчик события на window, но как это правильно сделать во Vue? Ведь если это сделать, то при любом нажатии любой клавиши обработчик !!именно для попапа!! будет запускать каждый раз, даже если попап и закрыт вовсе.

Answer 1

[Alex]

Вам поможет https://stackoverflow.com/questions/148361/how-can...
То есть вам нужно

1. Сделать ваш див фокусиреумым
   
2. Перед открытием Запомнить в каком месте находится фокус пользователя, если он есть
   
3. Открыть попап и переместить фокус на него
   
4. Заблокировать возможность выйти фокусу за пределы модального окна
   
5. При закрытии попапа вернуть фокус пользователя туда, где он был ранее
   

Кроме того. Внутри компонента Vue вы вполне можете навешивать обработчик каких-то событий на весь документ. Главное:

1. При удалении компонента удалять и обработчики
   
2. Внутри обработчика проверять имеет ли дальнейшая обработка смысл
   

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