简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 在利用button标签时，鼠标事件和键盘事件切换会出错？
習慣沉默
習慣沉默 2017-05-18 10:54:36
0
3
552

做了一个抽奖的小东西，开始和停止的按钮是button标签的。当我用鼠标按下开始，输入完人数之后，按回车暂停是可以的，但再按一次回车会开始后瞬间停止，而不是我再按一次回车才结束，如果不用button标签的话是可以的，又或者是我先点击了一下页面再按回车也不瞬间停止，想知道为什么？

代码：
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>抽奖</title>
<style type="text/css">
*{
    margin:0 0;
    padding:0;
    font-family: "微软雅黑";
}
h1{margin-top:20px;text-align: center;}
#content{
    margin: 0 auto;
    text-align: center;
}
#show{
    margin: 10px auto;
    padding: 20px;
    text-align: center;
    font-size: 300px;
}
.btn{
        margin-top: 10px;
}

.btn li{
    display: inline-block;
    width:220px;
}
.btn button{
    border: 2px outset #fff;
    background: #000;
    letter-spacing: 2px;
    padding: 5px 8px;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    border-radius:5px; 
    outline:none;
    cursor: pointer;
    width: 150px;
    text-align: center;
}
#footer{
    margin-top: 65px;
}
</style>
<script type="text/javascript">
var timer=null;
var num=0;
var flag=0;
window.onload=function(){
    start=document.getElementById("start");
    stop=document.getElementById("stop");
    showNum=document.getElementById("show");
    start.onclick = playFun;
    stop.onclick = stopFun;

    document.onkeyup=function(event){
        var event = event || window.event;
        if(event.keyCode==13){
            if(!flag){
                playFun();
            } 
            else {
                stopFun();
                console.log(flag);
            }
                    
        }
    }
}
function playFun (){
    if(!num){
    num = window.prompt("参加这次抽奖的人数：");
    if(!num){
        playFun();
        }
    }
    clearInterval(timer);
    timer = setInterval(function(){
        var random = Math.floor(Math.random()*num+1);
        showNum.innerHTML=random;
        },50);
        showNum.style.background = '#FFF';
        showNum.style.color = '#000';
        flag=1;
    }
    function stopFun (){
        clearInterval(timer);
        showNum.style.background = '#000';
        showNum.style.color = '#FFF';
        flag=0;
        }
</script>

</head>
<body>

<h1>抽奖XD</h1>
<p id="content">
    <p id="show">1</p>
    <ul class="btn">
        <li><button id="start">开始</button></li>
        <li><button id="stop">停止</button></li>
    </p>
</p>

</body>
</html>

習慣沉默
習慣沉默

全部回复(3)
Peter_Zhu
Peter_Zhu2017-05-18 10:56:36 3 楼

点击一次button之后，焦点就定位到了button上，此时每次按回车，button都就会被点击两次。换成span就不会出现焦点的问题

点赞 +0
添加回复
刘奇
刘奇2017-05-18 10:56:36 2 楼

原理如楼上所说，补充下答案。

function playFun (e){
    e && e.target.blur()
    if(!num){
    num = window.prompt("参加这次抽奖的人数：");
    if(!num){
        playFun();
        }
    }
    clearInterval(timer);
    timer = setInterval(function(){
        var random = Math.floor(Math.random()*num+1);
        showNum.innerHTML=random;
    },50);
    showNum.style.background = '#FFF';
    showNum.style.color = '#000';
    flag=1;
}
function stopFun (e){
    e && e.target.blur()
    clearInterval(timer);
    showNum.style.background = '#000';
    showNum.style.color = '#FFF';
    flag=0;
}
点赞 +0
添加回复
洪涛
洪涛2017-05-18 10:56:36 1 楼

焦点在按钮上的时候, 按下enter就相当于一次鼠标左键点击.
还有, button标签是不被建议使用的, 所以直接替换掉不用犹豫

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！