javascript - 两个 div 和 div 子元素之间的键盘箭头导航

Question

我有一个侧边栏 div 和一个内容 div 布局。我正在尝试使其箭头键可导航。

侧边栏div

侧边栏 div 具有垂直堆叠的菜单，因此它应该能够接受向上箭头和向下箭头事件以在每个菜单链接之间移动并相应地在内容 div 中加载内容。右箭头应导航到内容 div 的第一个元素。

内容部分

content div 是一个 flex 容器，它在两行中加载图像缩略图。箭头键应该能够在它们之间导航。如果当前焦点在内容 div 的第一个元素上，左箭头键应再次将焦点移动到 Sidebar div。

我现在在 sidebar.js 中有这段代码 -

      myClass.renderUI = function(data) {
            var sidebar = $('#sidebar-menu');
            html = template(data);
            sidebar.append(html);

            var arr = sidebar.find('li');
            for (var i = 0; i < arr.length; i++) {
                menu_rows.push($(arr[i]));
            }
            $('#sidebar-menu').find('li')[0].focus();
            $("#sidebar-menu").find('li:first').addClass('active')
            $("#movie-list").find('li:first').addClass('movie-active')
            $('#navbar').find('li').each(function(item) {
                $(item).keydown(function(e) {
                    handleKeyEvents(e, this);
                }); 
            })
        };

           function handleKeyEvents(e, currentElem) {
                switch(e.which) {
                    case 37:
                    break;

                    case 38:
                    makeMenuActive(currentElem);
                    break;

                    case 39:
                    break;

                    case 40:
                    makeMenuActive(currentElem);
                    break;

                    default:
                    return;
                }
                e.preventDefault();
            }

            function makeMenuActive(currentElem) {
                var url = currentElem.nextElementSibling.dataset.url;
                $('.active').removeClass('active').next('li').addClass('active');
                window.location.hash = url;
            }

我现在可以在侧边栏上的菜单链接之间更改焦点，并且 keydown 事件仅在从第一个移动到第二个时有效。有没有办法在所有 li 元素上绑定(bind) keydown 事件(效率低下)。我们不能使用事件委托(delegate)并在父 div 上添加一个 keydown 事件吗？

另外，如何处理侧边栏 div 和内容 div 之间的箭头键导航？

提前致谢。

Answer 1

是的，委托(delegate)是要走的路。将监听器附加到文档对象并检查焦点元素:

$(document).keydown(function (e) {
    if (e.which === 38) {
        if ($(':focus').index() === 0) {
            // checks if focused item is first child of parent
        }
    }
});

更新

您的图片需要位于 anchor 链接标签中，因为 <li>元素没有获得焦点伪类。请参阅 jsfiddle:

https://jsfiddle.net/91ahhmwm/1/