容器添加onkeydown之类的键盘事件无效?

在项目开发中,想监听一个容器的上,下,左,右事件,发现console并没有被执行

    const container = document.getElementById('myContainer')
    container.onkeydown = (e) => {
        console.log('e', e)
    }

原因是container元素不存在可以获取焦点的子元素,所以onkeyup和onkeydown事件不会触发。

onkeyup, onkeydown之类的键盘事件只会在元素获得焦点,也就是成为当前活动元素后才会触发。

这里提供两种解决方案:

1. 给container设置tabindex属性,让它可以聚焦。

container.tabIndex = -1;

2. 把事件放到document身上,document对象是一个特例,它总是可以捕捉到键盘事件。