【发布时间】：2011-09-07 00:12:24
【问题描述】：
我的任务是为 GoogleTV 的现有网络应用程序实现 d-pad 导航（我正在 Google Chrome 中进行测试，到目前为止它们的操作似乎相似。In their notes 用于实现 d-pad 导航，它们具有基本的向上、向右、向左、向下和选择的处理程序。
目前我有一个方案来初始化一个虚拟光标，然后为各种dpad笔画。我依靠使用document.elementFromPoint() 并循环遍历，直到找到以前未选择的新元素。我使用outline: css 来指示当前位置，并且仅在选择了其中一个 dpad 控件时才显示它。
我有一个初始化步骤，它将dpadClickable 类添加到所有可点击的项目中，然后随着光标的移动，我将dpadHighlighted 添加到新项目中并从所有其他元素中删除。看起来不错。
如果我有一个可滚动的元素，或者如果方向使我的点向下移动找不到任何东西，这一切都会失败。
我想要一个数据结构来保存我所有的dpadClickable 项目，然后在 d-pad 单击时，能够对其进行迭代以找到最接近的顶部、向下、左侧和右侧元素。比如，我应该根据top 和left 属性来做吗？还是基于计算的中心点？
我找到了一个jQuery library，它实现了这一点，并在某种程度上对其进行了逆向工程。但我真正想要的是这类编程问题的入门知识：我应该寻找图形编程算法吗？游戏？还有什么？
更新：User Experience StackExchange 网站上的问题：Adding D-pad navigation to an existing web application: Resources?
【问题讨论】：
标签： javascript html google-chrome google-tv d-pad