                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /DOM事件探秘

关于键盘事件和鼠标事件混合使用的问题

<!doctype html>

<html>

<head>

<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>

<h3 id="title">开始抽奖了</h3>

</div>

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：鼠标和键盘如何混合使用？

yiyi30

2016-04-28

源自：DOM事件探秘 4-5

关注问题我要回答

1512

操作

收起

3 回答

小爬虫8036 回答被采纳 +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;就可以了。

0 回复有任何疑惑可以回复我~

收起回答

yiyi30 提问者

非常感谢！

2016-05-03 回复有任何疑惑可以回复我~

Farris
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();
}

1 回复有任何疑惑可以回复我~

收起回答