JS键盘控制菜单,我这样的思路是否可以实现?如何实现? 50C

图片说明

 <!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对象

                                            如何才能解决以上问题呢?

1个回答

key事件肯定是要div获取焦点(点击)后才能触发的。你想不在div上也能触发,应该给document加key事件,然后修改你的键盘方向键的逻辑,如没有获取焦点给第一个菜单项获取焦点弹出

u012952738
墨皓 有demo吗?
大约 3 年之前 回复
u012952738
墨皓 回复showbo: 额,这个好像没学过
大约 3 年之前 回复
showbo
支付宝加好友偷能量挖 回复墨皓: 不用focus。。。用焦点样式来控制
大约 3 年之前 回复
u012952738
墨皓 回复showbo: 你说的是指我在function中给下一个元素element.focus()吗?
大约 3 年之前 回复
showbo
支付宝加好友偷能量挖 回复墨皓: 是的,key事件中的target就是你点击那个焦点对象。你应该依据dom中焦点样式来切换,而不是target。如菜单1得到焦点(加样式focus),在按键盘向下键,通过获取那个dom中哪个有focus样式(你也可以用一个全局变量存储这个focus对象,按键切换时更新变量),然后依据方向键就行设置相关dom的焦点
大约 3 年之前 回复
u012952738
墨皓 目前来说主要的问题,是我的键盘控制,例如我clik首页,然后按方向键,虽然看起来像是在切换,但是其实事件的target,始终是我都一次clik的那个div,最终让我感觉思路好像有问题似的
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问