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

<html><head><scripttype="text/javascript"src="/jquery/jquery.js"></script><scripttype... <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
// 鼠标悬浮事件
function mOver(ele){
$(ele).text(2);
// 鼠标停在此div上不动,然后点击空格键触发事件
$(ele).keydown(function(event){
if (event.keyCode == 32){
$(ele).text(101);
}
});
}
</script>
</head>
<body>
<div onmouseover="mOver(this)" >

</div>
</body>
</html>
展开
 我来答
众I从I人
2018-05-09 · TA获得超过114个赞
知道小有建树答主
回答量:54
采纳率:0%
帮助的人:35.7万
展开全部

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

<!DOCTYPE html>
<!--STATUS OK-->
<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)
}
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式