个人中心
gpt4 book ai didi

javascript - 保留可用于聚焦后代的按键事件

转载 作者：太空狗 更新时间：2023-10-29 16:44:36 24 4
gpt4 key购买 nike

我有一个(自制的)表格，其中有一些物理行和许多逻辑行，我想(也)使用键盘滚动。如果后代被关注并理解键，我希望事件由后代处理并被我的表忽略。

也许代码说的很清楚:

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 中测试。

笨蛋

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

澄清

  • 任何对当前获得焦点的后代无意义的事件都应由该表处理。
  • 例如，PAGE_UP对于 input 毫无意义，所以表格应该滚动，即使焦点子进程处理一些其他事件，例如 HOME .
  • 这就是我添加 if (isText) return; 的原因至 HOME和 END只有那些在 input 中有用而不是其他键，它们不是。

最佳答案

我已经获取了你的 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>

关于javascript - 保留可用于聚焦后代的按键事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46018678/

24 4 0
文章推荐： c - 在调用 va_end 之前进行 longjmp 可以吗？
文章推荐： c - 使用 const int 定义数组的大小
文章推荐： 在 switch 中捕获混合枚举
文章推荐： c - 如何在没有 Visual Studio 的情况下下载和安装 Microsoft 的 Visual Studio C/C++ 编译器
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com