如何只能在所选链接上按回车键继续?

Question

现在，您可以使用箭头键浏览链接列表，并且它们会用css突出显示，但我希望能够按回车键继续突出显示的选定链接。关于如何做到这一点的任何想法？

抱歉，如果代码很乱，很新。

var li = $('li');
var liSelected;
$(window).keydown(function(e) {
if (e.which === 40) {
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.next();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.eq(0).addClass('selected');
}
} else {
liSelected = li.eq(0).addClass('selected');
}
} else if (e.which === 38) {
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.prev();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.last().addClass('selected');
}
} else {
liSelected = li.last().addClass('selected');
}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="meny">
<ul>
<li id="start"><a href="Spill/spill.html">Start new game</a></li>
<li id="settings"> <a href="#">Setting</a></li>
<li id="help"> <a href="#">Help</a></li>
<li id="exit"> <a href="#">Exit</a></li>
</ul>
</div>

<!-- language: lang-css -->
li.selected {
color:white; font-size: 32px;}
a {
color:inherit;
}
a:focus {color:white; font-size: 32px; text-decoration: none;}
ul
{
text-decoration: none;
list-style-type: none;
}
<!-- end snippet -->

Answer 1

要完成此操作，您可以侦听返回键按下，代码 13，然后单击包含.selected类的li中包含的a元素。但是，您应该注意，此行为可能会干扰DOM中的任何form元素，并且如果您需要保持ISO合规性，则可能会破坏可访问性规则。

另请记住，您可以干掉控制向上/向下箭头键选择li元素的逻辑。试试这个：

var $li = $('li');
$(window).keydown(function(e) {
if (e.which === 40 || e.which === 38) {
e.preventDefault();
var goingDown = e.which === 40;
var $selected = $li.filter('.selected');
$selected.removeClass('selected');
var $target = $selected[goingDown ? 'next' : 'prev']();
if (!$target.length)
$target = $li[goingDown ? 'first' : 'last']();
$target.addClass('selected');
}

if (e.which === 13) {
var $selected = $li.filter('.selected');
if ($selected.length)
$selected.find('a')[0].click();
}
});
// only for debugging:
$('a').click(function(e) {
e.preventDefault();
console.log(`You clicked ${$(this).text()}!`);
});

.selected,
.selected a {
color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="meny">
<ul>
<li id="start"><a href="Spill/spill.html">Start new game</a></li>
<li id="settings"><a href="#">Setting</a></li>
<li id="help"><a href="#">Help</a></li>
<li id="exit"><a href="#">Exit</a></li>
</ul>
</div>

最后，请注意在箭头键处理程序中使用preventDefault()来停止在按下箭头键时滚动页面，这是标准行为。