如何使按键事件的目标等于 "selected" 元素？

Question

TL;DR: 我如何实现“select”助手，以便一旦集合中的元素被 selected，keypress 事件被触发时 target 等于元素，而不是 body?

我试图让一些元素成为“select可用的”：一旦用户点击其中一个元素，那个元素就会被 selected，而且应该可以使用箭头在它们之间导航。一旦元素被 selected，可能一些热键应该也能与之交互。

我已经实现了第一部分：我有一个 class 和一个助手

var selectClass = 'selectedView';
var selectView = function(element) {
    // remove other selections
    jQuery('.'+selectClass).removeClass(selectClass);
    // select
    jQuery(element).addClass(selectClass);
    //# to do: scroll into view
};

还有点击处理程序：

jQuery(document.body).on('click',viewsSelector,function(ev){
    var viewElement = ev.target;
    // don't select views' children
    while(!jQuery(viewElement).is(viewsSelector) && viewElement.parentElement)
        viewElement = viewElement.parentElement;
    selectView(viewElement);
});

现在我想实现键盘导航。天真的实现

jQuery(document.body).on('keydown','.'+selectClass,function(ev){
    console.log('keydown at selected? key: '+ev.which+', target is ',ev.target);
    //# implement jump
});

不起作用，因为目标是 body（可以通过注释掉委托位 ,'.'+selectClass 轻松检查）。

但我不想处理所有按键，我需要让这些按键仅在 selected 项目时才起作用。作为一种解决方法，我可以添加一个检查项目是否 selected，但是 我想知道是否有办法让事件的目标成为项目本身，而不是 document.body.将 element.focus(); 和 jQuery(element).focus(); 添加到 selectView 也无济于事。

为什么我想避免只处理 body 上的按键并检查项目是否 selected 的一个特殊原因是项目中的一些小部件也必须处理这些按键和“在这些情况下不会跳转”。

Answer 1

您的元素未接收键盘事件，因为它在单击时未获得焦点。所有元素在单击时都无法获得焦点，因为它们没有设置 tabindex 焦点标志，但以下元素除外。 [来源：www.w3.org]

<a> elements that have an href attribute

<link> elements that have an href attribute

<button> elements

<input> elements whose type attribute are not in the Hidden state

<select> elements

<textarea> elements

Editing hosts

Browsing context containers

如果某个元素不在焦点中，键盘事件将由 body 元素接收。

When an element is focused, key events received by the document must be targeted at that element. There may be no element focused; when no element is focused, key events received by the document must be targeted at the body element. [source:www.w3.org]

您可以使任何 HTML 元素能够获得焦点，从而通过添加 tabindex 属性.

来接收键盘事件

$('.box').on('keydown', function(event) {
  console.log(event.target);
})

.box {
  height: 120px;
  width: 120px;
  background: #7cf76e;
  float: left;
  margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" tabindex="1">A</div>
<div class="box" tabindex="1">B</div>
<div class="box" tabindex="1">C</div>

如何使按键事件的目标等于 "selected" 元素？

How to make keypress event have the target equal to a "selected" element?

javascript

events

keypress