Внедрение Switcher в Javascript

Я работаю над средним приложением в Javascript. Я хотел бы создать переключатель, аналогичный переключателю окон ОС. Когда пользовательский интерфейс становится активным, он должен отключать все прослушиватели событий от других частей пользовательского интерфейса и предоставлять активному пользовательскому интерфейсу эксклюзивный доступ к клавиатуре и вводу мыши. Например, ctrl+c на активной панели будет копировать данные панели, а ctrl+c на активном холсте скопирует выбранную фигуру. Обе панели и холст содержатся в одном представлении.Внедрение Switcher в Javascript

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

Это, однако, экспериментальное решение, каковы текущие опрятные способы реализации этой функции с помощью Javascript?

источник

2016-04-30 sudo

Я думаю, что это на самом деле больше из/CSS вопросов HTML - читать на свойстве CSS под названием 'указатель events' https://developer.mozilla.org/en- US/docs/Web/CSS/pointer-events –

@JeremyJStarcher Спасибо за ссылку, я не знал об этой классной функции CSS. Однако это, похоже, не решает проблему отправки клавиатуры inupt, например, в отличие от входных элементов, которые невозможно прослушать для событий нажатия клавиш на div или холсте, поэтому эти события должны быть пойманы на уровне окна и отправлены для активных наблюдателей. – sudo

В ES6 нет ничего нового, что позволило бы вам сделать это намного иначе, чем вы сделали бы это в ES5. Если вы хотите избежать шаблона наблюдателя, вы должны взглянуть на функциональное реактивное программирование. – Bergi

Для элемента управления событиями клавиатуры он должен иметь фокус. Но по умолчанию некоторые элементы HTML, такие как div и canvas, не могут сосредоточиться на них. Если вы установили свойство tabIndex, они также будут сфокусированы.

function keypress() { 
 
    console.log("works"); 
 
} 
 

 
document.getElementById("element").focus();

<canvas width="10" height="10" tabIndex="0" onkeydown="keypress()" id="element"></canvas>

источник

2016-05-05 21:12:39

Отличное решение, спасибо! Баунти в 18 часов из-за задержки, вызванной механизмом вознаграждения StackOverflow ... – sudo

Будет ли этого достаточно для вашего вопроса? –

Это прекрасно, спасибо! – sudo

Внедрение Switcher в Javascript

ответ

Смежные вопросы