JS键盘控制菜单，我这样的思路是否可以实现？如何实现？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>menu3</title>
<style>
div {
text-align: center;
background-color: blue;
width: 100px;
height: 30px;
line-height: 30px;
float: left;
display: inline-block;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.first {
margin-left: 10px;
}
.second {
visibility: hidden;
}
#container {
background-color: white;
width: auto;
height: auto;
margin: 0 200px;
padding: 0;
}
#news_notice_ {
position: absolute;
margin-left: 18px;
visibility: hidden;
}
</style>
</head>
<body>
<div id="container" tabindex="0">
<div id="home" class="first" tabindex="0" onmouseover="over(this);" onmouseout="out(this)"
onkeyup="keyup(event)">首页
</div>
<div id="news" class="first" tabindex="0" onmouseover="over(this);" onmouseout="out(this)"
onkeyup="keyup(event)">新闻中心
<div id="news_" class="second">
<div id="news_authority" class="secondnode" onmouseover="over(this);" onmouseout="out(this)">
官方新闻
</div>
<div id="news_notice" class="secondnode" onmouseover="over(this);" onmouseout="out(this)">官方公告
<div id="news_notice_" class="third">
<div id="news_notice_sys" onmouseover="over(this);" onmouseout="out(this)">系统维护</div>
<div id="news_notice_ui" onmouseover="over(this);" onmouseout="out(this)">UI优化</div>
<div id="news_notice_acc" onmouseover="over(this);" onmouseout="out(this)">封号名单</div>
<div id="news_notice_test" onmouseover="over(this);" onmouseout="out(this)">新区测试</div>
<div id="news_notice_blog" onmouseover="over(this);" onmouseout="out(this)">论坛维护</div>
<div id="news_notice_bug" onmouseover="over(this);" onmouseout="out(this)">场景BUG</div>
</div>
</div>
<div id="news_event" class="secondnode" onmouseover="over(this);" onmouseout="out(this)">活动新闻
</div>
<div id="news_match" class="secondnode" onmouseover="over(this);" onmouseout="out(this)">赛事新闻
</div>
</div>
</div>
<div id="event" class="first" tabindex="0" onmouseover="over(this);" onmouseout="out(this)"
onkeyup="keyup(event)">活动中心
</div>
<div id="datas" class="first" tabindex="0" onmouseover="over(this);" onmouseout="out(this)"
onkeyup="keyup(event)">游戏资料
</div>
<div id="prop" class="first" tabindex="0" onmouseover="over(this);" onmouseout="out(this)"
onkeyup="keyup(event)">道具城
</div>
<div id="download" class="first" tabindex="0" onmouseover="over(this);" onmouseout="out(this)"
onkeyup="keyup(event)">
下载中心
</div>
<div id="custom" class="first" tabindex="0" onmouseover="over(this);" onmouseout="out(this)"
onkeyup="keyup(event)">
客服中心
</div>
</div>
</body>
<script>
var hi = -1;
var first_child = document.getElementsByClassName("first");
var container = document.getElementById("container");
var news = document.getElementById("news");
//鼠标悬浮函数
function over(ele) {
var element = ele;
var child = element.childNodes[1];
var parent = element.parentNode;
if (hi > -1) {
var childs = parent.children[hi];
if (childs != null) {
childs.style.backgroundColor = "blue";
}
}
hi = getindex(parent, ele);
// console.warn(ele);
// console.warn(hi);
element.style.backgroundColor = "#0099FF";
if (child != null) {
child.style.visibility = "visible";
}
}
//鼠标移开函数
function out(ele) {
var child = ele.childNodes[1];
ele.style.backgroundColor = "blue";
if (child != null) {
child.style.visibility = "hidden";
}
}
//键盘函数
function keyup(event) {
var ev = event || window.event;
var key = ev.keyCode;
var ele = ev.target;
var parent = ele.parentNode;
var childs = parent.children;
var child_nodes = ele.children;
console.warn(ele);
for (var i in child_nodes) {
console.warn(child_nodes[i]);
}
var node = child_nodes[0];
if (key == 37) {
if (parent == container) {
--hi;
if (hi < 0 || hi > childs.length - 1) {
hi = -1;
}
if (hi == -1) {
hi = 0;
}
if (hi > -1 && hi < childs.length) {
if (childs[hi + 1] != null) {
childs[hi + 1].style.backgroundColor = "blue";
}
childs[hi].click();
childs[hi].style.backgroundColor = "#0099FF";
}
}
} else {
}
if (key == 39) {
if (parent == container) {
++hi;
if (hi <= 0 || hi > childs.length - 1) {
hi = -1;
}
if (hi == -1) {
hi = childs.length - 1;
}
if (hi > -1 && hi < childs.length) {
if (childs[hi - 1] != null) {
childs[hi - 1].style.backgroundColor = "blue";
}
childs[hi].click();
childs[hi].style.backgroundColor = "#0099FF";
}
}
} else {
}
if (key == 38) {
if (parent != container) {
if (hi == 0) {
} else {
--hi;
if (hi < 0 || hi > childs.length - 1) {
hi = -1;
}
if (hi == -1) {
hi = 0;
}
if (hi > -1 && hi < childs.length) {
if (childs[hi + 1] != null) {
childs[hi + 1].style.backgroundColor = "blue";
}
childs[hi].style.backgroundColor = "#0099FF";
}
}
}
}
if (key == 40) {
console.warn(node);
if (parent == container) {
if (child_nodes.length > 0) {
node.style.visibility = "visible";
}
} else {
}
}
}
function getindex(parent, value) {
var childs = parent.children;
for (var i in childs) {
if (childs[i] === value) {
return i;
}
}
}
</script>
</html>
我这样写发现：1、不点击div，只是鼠标悬停，div不会触发键盘事件
2、虽然触发了键盘事件，但发现触发者一直是最初的div对象
如何才能解决以上问题呢？
key事件肯定是要div获取焦点（点击）后才能触发的。你想不在div上也能触发，应该给document加key事件，然后修改你的键盘方向键的逻辑，如没有获取焦点给第一个菜单项获取焦点弹出