关于键盘事件和鼠标事件混合使用的问题
yiyi30
2016-04-28 22:31
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖系统</title>
<style>
*{margin:0;padding:0;}
input{border:none;outline:none;}
.box{width:130px;margin:40px auto;}
h3{color:#F60;text-align:center;}
.box input{height:24px;line-height:24px;width:50px;margin-left:6px;display:inline-block;font-size:14px;color:#fff;text-align:center;background:#036;border-radius:8px;margin-top:20px;}
</style>
</head>
<body>
<div class="box">
<h3 id="title">开始抽奖了</h3>
<input type="button" value="开始" id="play"/>
<input type="button" value="停止" id="stop"/>
</div>
<script>
var data=['iphone','iPad','惠普打印机','佳能相机','谢谢参与！','50元充值卡','200元购物卡'],
timer=null,
flag=0;
window.onload=function(){
var oTitle=document.getElementById('title'),
oPlay=document.getElementById('play'),
oStop=document.getElementById('stop');
oPlay.onclick=function(){
playFun();
/*flag=1;*/
console.log(flag+'playclick');
}
oStop.onclick=function(){
stopFun();
/* flag=0;*/
console.log(flag+'stopclick');
}
document.onkeyup=function(event){
var e=event||window.event;
if(e.keyCode==13){
if(flag==0){
playFun();
flag=1;
console.log(flag+'playkey');
}else{
stopFun();
flag=0;
console.log(flag+'stopkey');
}
}
}
function playFun(){
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length);
oTitle.innerHTML=data[random];
},100);
oPlay.disabled=true;
oPlay.style.background="#ccc";
}
function stopFun(){
clearInterval(timer);
oPlay.disabled=false;
oPlay.style.background="#036";
}
}
</script>
</body>
</html>
代码如上，问题1：当我用空格键触发键盘事件时，只要先用鼠标触发过事件，则空格键再也不能触发事件，有大神知道原因吗？
问题2：只要先用鼠标触发过事件，则在用键盘触发事件时每次都会先执行一个鼠标触发的事件，然后再执行键盘触发的事件，如键盘触发开始，则先执行一次鼠标触发的结束函数，然后再执行开始函数，从打印的flag可以看出,原因是什么？
问题3：鼠标和键盘如何混合使用？
3回答
-
- 小爬虫8036
- 2016-04-29 17:14:12
先声明一下，键码13的是回车键，不是空格键
然后我测试了一下，键盘和鼠标单独使用是没有问题的。
鼠标触发后键盘不是不能在触发,鼠标点开始之后，键盘要按两次才能停止。因为第一次执行的是playFun()，第二次才是stopFun()。
两者同时使用会出错是因为flag值的问题，flag的改变只会在使用键盘事件的时候。所以 if() 判断的时候到底执行playFun()还是stopFun()肯定是不准确的。
解决办法：在if(){}else{}中删去flag=0;和flag=1;将flag的改变放到两个函数中；在playFun()的内部末尾加上flag=1;在stopFun()的内部末尾加上flag=0;就可以了。
-
- Farris
- 2016-07-30 21:50:16
var data = ["iphone", "ipad", "sony手机", "windowsPhone", "dell电脑"]; var title = document.getElementById("title"); var startBtn = document.getElementById("start"); var stopBtn = document.getElementById("stop"); var timer = null; var startFlag = false; function startFunc() { if (startFlag) { return null; } clearInterval(timer); timer = setInterval(function () { var index = Math.floor(Math.random() * data.length); title.innerHTML = data[index]; }, 50); startBtn.style.background = "gray"; startBtn.style.cursor = "default"; startFlag = true; } function stopFunc() { clearInterval(timer); startBtn.style.background = "#036"; startBtn.style.cursor = "pointer"; startFlag = false; } startBtn.onclick = startFunc; stopBtn.onclick = stopFunc; document.onkeyup = function (e) { console.log(e.keyCode); if (e.keyCode !== 13) { return null; } !startFlag ? startFunc() : stopFunc(); } -
- 良辰瑾空人心
- 2016-07-21 21:34:04
然而这种方法并不行 也有BUG 不知道为什么
DOM事件探秘
99546 学习 · 1197 问题
相似问题