js鼠标悬浮事件嵌套键盘事件问题,点击空格并没有响应,求大神来帮助...

发布网友发布时间：2022-04-24 05:58

共1个回答

热心网友时间：2022-04-22 19:13

触发keydown事件需要控件获取到焦点，div控件无法像input控件那样获取到焦点，无法触发keydown事件，因此可以将keydown事件绑定在document上，然后用div的hover事件去判断鼠标是否正在div上。

<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta property="wb:webmaster" content="3aababe5ed22e23c" />
    <meta name="referrer" content="always" />
    <title>s鼠标悬浮事件嵌套键盘事件问题，点击空格并没有响应，求大神来帮助！_百度知道</title>
    <style>
        .divTest { width: 200px; height: 200px; border: 1px solid #CCC; }
    </style>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        var divFocus = false;

        $(function () {
            $(".divTest").hover(function () {
                divFocus = true;
                $(".divTest").text(2);
            }, function () {
                divFocus = false;
                $(".divTest").text("");
            });

            $(document).keydown(function (event) {
                if (!divFocus) {
                    return;
                }

                if (event.keyCode != 32) {
                    return;
                }

                $(".divTest").text(101);
            });
        });
    </script>
</head>

<body>
    <div class="divTest"></div>
</body>

</html>

追问谢谢，原来是没有获取到焦点的问题。那如果我要继续控制点击空格的事件，点一下，$(".divTest").text(101); 再次点击，$(".divTest").text(202); 然后再点击，$(".divTest").text(101); 这样循环，该怎么处理。

追答

把$(".divTest").text(101);修改一下：

if ($(".divTest").text() == "101") {
$(".divTest").text(202)
} else {
$(".divTest").text(101)
}

全部栏目

js鼠标悬浮事件嵌套键盘事件问题,点击空格并没有响应,求大神来帮助...