前端杂症--div等容器keydown事件无效（包括vue的@keydown）

先说问题原因

onKeydown事件触发条件：容器中某个元素获取焦点时，按键。因此无效的原因是当前容器内并没有元素获取焦点。

场景1：应用中监听快捷键

• 解决方案：利用全局监听

	// 
	window.onKeydown
	document.onkeydown

场景2：窗口中多个应用，监听各自的快捷键。(重点)

与“场景一”不同的是，需要真正在某个自定义容器中监听，并且不污染全局

• 解决方案: 利用contenteditable属性，让容器可编辑。（需要注意可编辑带来的影响，代码中会说明）

<!--监听容器-->
<div id="evnetContiner" contenteditable="true">
	<!--容器中内容包裹，用于隔离父容器的contenteditable属性对子元素造成影响-->
	<div id="continer" contenteditable="false"></div>
</div>

const EventContiner = document.querySelector('#evnetContiner');
      
EventContiner.addEventListener('keydown', (e) => {
	// do ...
	// 防止输入内容，影响布局。实测子元素input、textArea不会影响
   e.preventDefault();
});

注意：

• 1. contenteditable会影响子元素，使子元素也变成可编辑，需要中间层隔离。
• 2. 键盘行为要取消掉（preventDefault），不然会输入内容。
• 3. 目前谷歌可用，方案仅做参考，兼容性未测试，待测试后补充兼容说明。