關(guān)于鍵盤(pán)事件和鼠標(biāo)事件混合使用的問(wèn)題
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>抽獎(jiǎng)系統(tǒng)</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">開(kāi)始抽獎(jiǎng)了</h3>
? ?<input type="button" value="開(kāi)始" id="play"/>
? ?<input type="button" value="停止" id="stop"/>
</div>
<script>
var data=['iphone','iPad','惠普打印機(jī)','佳能相機(jī)','謝謝參與！','50元充值卡','200元購(gòu)物卡'],
? ? 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>
代碼如上，問(wèn)題1：當(dāng)我用空格鍵觸發(fā)鍵盤(pán)事件時(shí)，只要先用鼠標(biāo)觸發(fā)過(guò)事件，則空格鍵再也不能觸發(fā)事件，有大神知道原因嗎？
問(wèn)題2：只要先用鼠標(biāo)觸發(fā)過(guò)事件，則在用鍵盤(pán)觸發(fā)事件時(shí)每次都會(huì)先執(zhí)行一個(gè)鼠標(biāo)觸發(fā)的事件，然后再執(zhí)行鍵盤(pán)觸發(fā)的事件，如鍵盤(pán)觸發(fā)開(kāi)始，則先執(zhí)行一次鼠標(biāo)觸發(fā)的結(jié)束函數(shù)，然后再執(zhí)行開(kāi)始函數(shù)，從打印的flag可以看出,原因是什么？
問(wèn)題3：鼠標(biāo)和鍵盤(pán)如何混合使用？
2016-04-29
先聲明一下，鍵碼13的是回車(chē)鍵，不是空格鍵
然后我測(cè)試了一下，鍵盤(pán)和鼠標(biāo)單獨(dú)使用是沒(méi)有問(wèn)題的。
鼠標(biāo)觸發(fā)后鍵盤(pán)不是不能在觸發(fā),鼠標(biāo)點(diǎn)開(kāi)始之后，鍵盤(pán)要按兩次才能停止。因?yàn)榈谝淮螆?zhí)行的是playFun()，第二次才是stopFun()。
兩者同時(shí)使用會(huì)出錯(cuò)是因?yàn)閒lag值的問(wèn)題，flag的改變只會(huì)在使用鍵盤(pán)事件的時(shí)候。所以 if() 判斷的時(shí)候到底執(zhí)行playFun()還是stopFun()肯定是不準(zhǔn)確的。
解決辦法：在if(){}else{}中刪去flag=0;和flag=1;將flag的改變放到兩個(gè)函數(shù)中；在playFun()的內(nèi)部末尾加上flag=1;在stopFun()的內(nèi)部末尾加上flag=0;就可以了。
2016-07-30
var?data?=?["iphone",?"ipad",?"sony手機(jī)",?"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 ?不知道為什么