Plunkr

Question

我有一个（自制）表，其中有几个物理行，有许多逻辑行，我想用键盘滚动（也）。如果一个后代被聚焦，它理解了密钥，我希望事件由后代处理并被我的表忽略。

也许代码说清楚了：

scroll.keydown = function(e) {
    if (e.shiftKey | e.controlKey | e.altKey) return;
    var isText = e.target.type === "text";
    var K = $.ui.keyCode;
    switch (e.keyCode) {
    case K.HOME: if (isText) return; scroll.move(-1000000); break;
    case K.END: if (isText) return; scroll.move(+1000000); break;
    case K.PAGE_UP: scroll.move(-10); break;
    case K.PAGE_DOWN: scroll.move(+10); break;
    case K.UP: scroll.move(-1); break;
    case K.DOWN: scroll.move(+1); break;
    default: return;
    }
    e.preventDefault();
};


<table tabindex="0" ng-keydown="scroll.keydown($event)" ...>
      ... <input ...>

它完美无缺，但它非常愚蠢：表知道它包含input元素并且它知道这样的元素可以使用例如HOME密钥，因此它会进行测试以使其不受影响。

那是非常错误的。现在，我添加了一个select，需要在DOWN案例中进行类似的测试才能使其保持正常运行。

有趣的是，还有另一个ng-keydown - 使用我的表中的组件，它可以非常相似地处理事件，但没有问题：

当我的内部组件聚焦时按DOWN，它首先进入事件，一切都很好。
当DOWN聚焦时按select，我的表首先获取事件并滚动。我想要而不是，就是选择会像往常一样打开。

使用angularjs v1.5.0和1.12.1在Chromium版本60.0.3112.113中测试。

Plunkr

http://plnkr.co/edit/nr2JVJU1U16465F1WKkC?p=preview

澄清

任何对当前焦点后代毫无意义的事件都应该由表格处理。
例如，PAGE_UP对input没有任何意义，因此表格应滚动，即使焦点儿童处理其他一些事件，例如HOME。
这就是我将if (isText) return;仅添加到HOME和END的原因，这些内容仅适用于input，而不适用于其他键。

Answer 1

我已经采取了你的plunkr的代码并做了一个非常小的改变，以帮助你得到你想要的。

在 $ scope.keydown 函数的最顶层，我添加了一个检查目标是输入还是选择的条件，然后它会忽略滚动。

这适用于nodeName属性，如下所示（检查 $ scope.keydown 函数）：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  var data = [];
  for (var i = 0; i < 10000; ++i) data.push({
    id: i,
    value: i * i
  });


  var scroll = $scope.scroll = {
    start: 0,
    limit: 10,

    move: function(delta) {
      var start = scroll.start + delta;
      start = Math.max(start, 0);
      start = Math.min(start, data.length - scroll.limit);
      scroll.start = start;
    },

    keydown: function(e) {
      // With the e.target.nodeName you can
      // can check if the keydown is being
      // triggered from the input or the select
      // and then avoid the table scroll
      if(e.target.nodeName === 'INPUT' || e.target.nodeName === 'SELECT') {
        return false;
      }

      if (e.shiftKey | e.controlKey | e.altKey) return;
      var isText = e.target.type === "text";
      var K = $.ui.keyCode;
      switch (e.keyCode) {
        case K.HOME:
          if (isText) return;
          scroll.move(-1000000);
          break;
        case K.END:
          if (isText) return;
          scroll.move(+1000000);
          break;
        case K.PAGE_UP:
          scroll.move(-10);
          break;
        case K.PAGE_DOWN:
          scroll.move(+10);
          break;
        case K.UP:
          scroll.move(-1);
          break;
        case K.DOWN:
          scroll.move(+1);
          break;
        default:
          return;
      }
      e.preventDefault();
    },
  };

  $scope.visibleData = [];
  $scope.$watchCollection("scroll",
    function() {
      for (var i = 0; i < scroll.limit; ++i) {
        $scope.visibleData[i] = data[i + scroll.start];
      }
    });

});

table:focus {
  border: 1px solid red;
}

table {
  border: 1px dotted blue;
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script data-require="jquery-ui@1.10.4" data-semver="1.10.4" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <ul>
    <li>Click in the input</li>
    <li>Press Shift-Tab</li>
    <li>Observe thar arrow-up and down control the outer select.</li>
    <li>Pres Tabl twice</li>
    <li>Observe that the the arrows scroll the table instead!</li>
  </ul>

  <select name="outer">
    <option>first</option>
    <option>second</option>
  </select>

  <table tabindex="1" ng-keydown="scroll.keydown($event)">
    <tr>
      <td>
        <input name="unused">
      </td>
      <td>
        <select name="select">
          <option>first</option>
          <option>second</option>
        </select>
      </td>
    </tr>
    <tr>
      <th>row</th>
      <th>value</th>
    </tr>
    <tr ng-repeat="x in visibleData">
      <td>{{x.id}}</td>
      <td>{{x.value}}</td>
    </tr>
  </table>

</body>

</html>

保留专门针对焦点后代的keydown事件

Plunkr

澄清

1 个答案: