關于鍵盤事件和鼠標事件混合使用的問題
<!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：鼠標和鍵盤如何混合使用？
2016-04-29
先聲明一下，鍵碼13的是回車鍵，不是空格鍵
然后我測試了一下，鍵盤和鼠標單獨使用是沒有問題的。
鼠標觸發后鍵盤不是不能在觸發,鼠標點開始之后，鍵盤要按兩次才能停止。因為第一次執行的是playFun()，第二次才是stopFun()。
兩者同時使用會出錯是因為flag值的問題，flag的改變只會在使用鍵盤事件的時候。所以 if() 判斷的時候到底執行playFun()還是stopFun()肯定是不準確的。
解決辦法：在if(){}else{}中刪去flag=0;和flag=1;將flag的改變放到兩個函數中；在playFun()的內部末尾加上flag=1;在stopFun()的內部末尾加上flag=0;就可以了。
2016-07-30
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
然而這種方法并不行 也有BUG ?不知道為什么