AngularJS/Ionic技术问题：如何通过方向键导航指定屏幕元素

我明白你现在遇到的问题了——用方向键导航到move-4的a标签后，没法继续跳到move-5，这大概率是因为focus()的生效条件没满足，加上指令里的一些细节没处理好。咱们一步步来解决：

问题根源分析 #

1. 方向键的默认行为干扰了focus：你原来的代码里event.preventDefault()放错了位置，根本没起到阻止默认行为的作用，方向键会触发页面滚动，干扰焦点设置。
2. a标签的可聚焦性存在隐患：你写的href="d2()"不是合法URL，浏览器可能不把它当成标准的可交互可聚焦元素；即使a标签默认带href可聚焦，也可能因为这种异常写法失效。
3. 指令里有重复冗余代码：比如重复声明currentId，容易引发逻辑错误。

修正后的指令代码 #

.directive("moveNext", function() {
  return {
    restrict: "A",
    link: function($scope, element, attrs) {
      // 提取获取当前元素编号的工具函数，减少重复代码
      const getCurrentMoveId = () => {
        const idMatch = attrs.id.match(/move-(\d+)/);
        return idMatch ? parseInt(idMatch[1], 10) : null;
      };

      element.bind("keyup", function(e) {
        // 先阻止方向键、回车的默认行为，避免页面滚动等干扰
        e.preventDefault();

        if (e.which === 37) { // 左箭头导航
          const currentId = getCurrentMoveId();
          if (!currentId) return;

          element[0].classList.remove('selected');
          const prevElement = angular.element(document.querySelector('#move-' + (currentId - 1)));
          if (prevElement.length) {
            prevElement[0].classList.add('selected');
            prevElement[0].focus();
          }
        }

        if (e.which === 39) { // 右箭头导航
          const currentId = getCurrentMoveId();
          if (!currentId) return;

          element[0].classList.remove('selected');
          const nextElement = angular.element(document.querySelector('#move-' + (currentId + 1)));
          if (nextElement.length) {
            nextElement[0].classList.add('selected');
            nextElement[0].focus();
          }
        }

        if (e.which === 13) { // 回车激活元素
          console.log("ENTER:" + JSON.stringify(element));
          // 触发元素的点击事件，真正实现激活功能
          element.trigger('click');
        }
      });
    }
  };
})

修正后的模板代码（重点处理a标签） #

<div>
  <button move-next id="move-1" ng-click="d1()">Yes</button>
  <button move-next id="move-3" ng-click="d1()">Yes</button>
  <button ng-click="d1()">No</button>
  <button move-next id="move-2" ng-click="d1()">Yes</button>
</div>
<!-- 修正a标签的交互属性，加tabindex确保可聚焦 -->
<a ng-click="d2()" move-next id="move-4" tabindex="0">Yes</a>
<a ng-click="d2()" move-next id="move-5" tabindex="0">Yes</a>

关键修改说明 #

• 阻止默认事件：在keyup事件处理开头就调用e.preventDefault()，避免方向键导致页面滚动，确保焦点设置不被干扰。
• 工具函数提取：把获取元素编号的逻辑抽成单独函数，避免重复代码，减少出错概率。
• a标签可聚焦保障：用ng-click替代直接写在href里的函数调用（符合Angular最佳实践），加上tabindex="0"强制让a标签保持可聚焦状态，彻底解决focus失效问题。
• 回车激活修复：补上element.trigger('click')，让回车真正触发元素的点击事件，完成激活功能。

内容的提问来源于stack exchange，提问作者user1361529