Question

TL; DR：如何实施＆＃34;选择＆＃34;帮助器，一旦选择了一个集合中的元素，keypress事件就会被触发，target等于元素，而不是body？

我尝试做的是让一些元素成为可选择的＆＃34;：一旦用户点击其中一个元素，一个元素被选中，并且它也应该可以导航在他们之间使用箭头，并且一旦选择了一个元素，也可能是一些热键也应该工作。

我已经实施了第一部分：我有一个班级和一个帮手

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轻松检查）。

但我不想处理所有按键，我只需要在选择一个项目时才能使这些按键完成。作为一种解决方法，我可以添加检查是否选择了某个项目，但我想知道是否有方法使该事件的目标成为项目本身，而不是document.body 。将element.focus();和jQuery(element).focus();添加到selectView并不会有帮助。

我想避免仅仅处理body上的按键并检查项目是否被选中的一个特殊原因是项目中的某些小部件也必须处理这些按键和＃34;跳转＆＃ 34;在那些情况下不会发生。

Answer 1

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

<a>具有href属性的元素

<link>具有href属性的元素

<button>元素

<input>类型属性未处于隐藏状态的元素

<select>元素

<textarea>元素

Editing hosts

Browsing context containers

如果元素不在焦点，则body元素会收到键盘事件。

当元素聚焦时，文档接收的关键事件必须定位在该元素。可能没有关注的元素;什么时候没有元素是集中的，文档接收的关键事件必须是目标在body元素。 [来源：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>

如何使按键事件的目标等于＆＃34;选择＆＃34;元件？

1 个答案: