切換實現在Javascript

我工作在Javascript中一箇中等規模的應用。我想創建一個類似於OS窗口切換器的切換器。當UI部件變爲活動狀態時，它應該靜音來自其他UI部件的所有事件偵聽器，併爲活動UI提供對鍵盤和鼠標輸入的獨佔訪問。例如ctrl+c有源面板上會複製面板數據，而ctrl+c上的有源畫布將複製選定的形狀。面板和畫布均包含在單個視圖中。實現它切換實現在Javascript

一種方法是利用觀察者模式給一個觀察者的獨家訪問靜音其他觀察員（切換器），這將避免不必要的觀察員用鍵盤和鼠標輸入的干擾。

然而，這是一個實驗性的解決方案，有什麼辦法實現用javascript這個功能目前整潔的方式？

來源

2016-04-30 sudo

我覺得這其實更多的HTML/CSS的問題 - 對所謂的'指針events' https://developer.mozilla.org/en- CSS屬性讀了美國/文檔/網絡/ CSS /指針事件 –

@JeremyJStarcher感謝您的參考，我不知道這個涼爽的CSS功能。但是，這似乎並沒有解決調度鍵盤入侵的問題，例如，與輸入元素不同的是，無法偵聽div或canvas上的按鍵事件，因此這些事件必須在窗口級別捕獲並調度積極的觀察員。 – sudo

在ES6中沒有什麼新東西可以讓你做到這一點，比你在ES5中做得更完美。如果你想避免觀察者模式，你應該看看Functional Reactive Programming。 – 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

偉大的解決方案，謝謝！由於StackOverflow的獎勵機制強制推遲18個小時的賞金... – sudo

這是否足以滿足您的問題？ –

這是完美的，謝謝！ – sudo

切換實現在Javascript

回答

相關問題