时间戳

首页 > 解决方案 > 处理 jQuery/JavaScript 中任何 HTML 元素的制表符

javascript - 处理 jQuery/JavaScript 中任何 HTML 元素的制表符

问题描述

我正在构建一个屏幕阅读器，我想使用 Tab 和 Shift+Tab 键在页面上的 HTML 元素中导航。

到目前为止，我有以下代码，它工作正常：

$('a, input, button').keyup(function(e) {
    // code
});

但是，我遇到的问题是上面的代码只适用于标签、输入和按钮。如果我想为跨度或摘要标签添加代码，我必须将代码更改为：

$('a, input, button, span, summary').keyup(function(e) {
    // code
});

我想知道是否可以重新编写它以便处理每个 HTML 元素。我试过类似的东西：

$('*').keyup(function(e) {
    // code
});

但这没有用。任何帮助，将不胜感激！

标签： javascripthtmljquery

解决方案

请首先阅读有关事件传播的内容。e.stopPropagation()您的活动（如果没有被or阻止e.stopImmediatePropagation()）将传播给所有家长，因此执行以下操作绝对足够了。

$(document).keyup(function(e) {
    // code
});

当然，如果您需要在某个区域而不是整个文档上处理事件，您可以在任何其他级别上捕获事件。.containerA这是一个仅处理包含在 div中的 A1 和 A2 按钮的示例。

$(function(){
  $('.containerA').keyup(function(e) { 
    if (e.key == 'Tab') {
     console.log($(e.target).text());
    }
  });
});
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containerA">
  <button>A1</button>
  <button>A2</button>
</div>

<div class="containerB">
  <button>B1</button>
  <button>B2</button>
</div>

谈到制表符，您可能需要捕捉焦点事件，但这并不清楚，所以我将立即回答您的问题。

推荐阅读