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

Posted 2023-02-25

【中文标题】两个 div 和 div 子元素之间的键盘箭头导航

【英文标题】：Keyboard arrow navigation between two divs and div child elements

【发布时间】：2017-01-27 08:28:24

【问题描述】：

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

侧边栏 div

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

内容分区

内容 div 是一个 flex 容器，它在两行中加载图像缩略图。箭头键应该能够在它们之间导航。如果当前焦点位于内容 div 的第一个元素上，左箭头键应再次将焦点移至侧边栏 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 元素上绑定 keydown 事件（效率低下）。我们不能使用事件委托并在父 div 上添加 keydown 事件吗？

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

提前致谢。

【参考方案1】：

是的，授权是要走的路。将监听器附加到文档对象并检查焦点元素：

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

更新

您的图像需要在锚链接标签中，因为<li> 元素没有获得焦点伪类。请参阅 jsfiddle：

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

【讨论】：

这也适用于侧边栏和内容 div 之间的导航吗？

好的。我想我能够做到这一点。但是，我在为两个单独的 div 添加单独的 keydown 事件侦听器时遇到问题。

有点..但是，我有一个用于侧边栏的 <div><ul><li><a> 布局和一个用于内容 div 的 <div><ul><li><img> 布局。

如果您将图像放在锚标签中，它应该可以工作。对于 href 属性，使用 # 就像在我的示例中一样

它确实有效！我终于让它工作了 :) 感谢您的解决方案。