jquery - Dom 遍历自动键盘焦点 - 空间导航

Question

我将从一些背景知识开始，希望能帮助我的问题更有意义。

我正在开发一个电视应用程序。这个概念很简单，基本上通过将浏览器覆盖在电视的视频平面上来工作。现在是电视，没有鼠标或额外的指点设备。所有交互都是通过 Remote 完成的。因此，用户需要能够直观地判断他们当前关注的是哪个元素。为了指示某个元素已获得焦点，我目前在该元素上附加一个彩色透明图像以指示焦点。

现在，当用户按下箭头键时，我需要根据按下的键关注正确的元素来做出响应。因此，如果按下向下箭头，我需要关注 DOM 树中的下一个可聚焦元素(可能是子元素或同级元素)，如果按下向上箭头，我需要响应前一个元素。这本质上会模拟浏览器内的空间导航。

我目前正在任何应该能够接收焦点的 DOM 元素上设置一个属性 (focusable=true)。我想做的是确定上一个或下一个可聚焦元素(即属性 focusable=true)并将焦点应用于该元素。

我希望遍历 DOM 树来确定下一个和之前的可聚焦元素，但我不确定如何在 JQuery 中或一般情况下执行此操作。

我倾向于尝试使用 JQuery 树遍历方法，如 next()、prev() 等。您会采取什么方法来解决此类问题？

谢谢

Answer 1

您可能会遇到的技巧是“向下”、“向右”、“向左”等。如果您将内容布局为表格(使用 HTML 表格)(3x3，如井字游戏板)并且您位于中心单元格中...

+-----+-----+-----+
|     |  1  |     |
+-----+-----+-----+
|  2  |  x  |  3  |
+-----+-----+-----+
|     |  4  |     |
+-----+-----+-----+

如果您按上、左、右、下键，则可以导航到方 block 1,2,3,4...但在 DOM 顺序中，它们是按顺序定义的 1,2,3,4

因此“down”需要知道跳过“3”并转到“4”...更糟糕的是，如果您有一个更大的表，则在 3 和 4 之间可能存在任意数量的“可聚焦”元素。 (我的简单情况是一个 3x3 的表，但你可以有各种节点、子节点、 float 节点等)

示例 HTML:

<table>
  <tr>
    <td></td>
    <td>1</td>
    <td></td>
  </tr>
  <tr>
    <td>2</td>
    <td>x</td>
    <td>3</td>
  </tr>
  <tr>
    <td></td>
    <td>4</td>
    <td></td>
  </tr>
</table>

您可能最好将每个可聚焦元素设置为按钮，从而它将具有(或者您可以设置)一个tabIndex...然后您可以使用箭头前进/后退(仅)通过控件。

否则，您需要构建足够智能的东西，以“从几何角度”了解您所在位置的向下、向左、向上......。