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