前端杂症--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(); });

注意：

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