按钮一次点击事件解决方案

JS限制按钮点击

最新推荐文章于 2024-06-09 16:10:26 发布

转载最新推荐文章于 2024-06-09 16:10:26 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/canghaigg/p/5291284.html

本文介绍了一个常见的JavaScript问题：如何防止按钮被重复点击以避免重复生成内容。提供了三种解决思路，并详细解释了一种最佳实践方案。

按钮一次点击事件，例如以下案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自动生成五条新闻</title>
    <script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('list');
var arr=[
'李嘉诚：香港没资格“独立” “港独”脱离现实',
'澳门操纵卖淫案宣判：赌王侄子被判1年零1个月',
'中国赴美留学生抱怨班上中国人众多 犹如未出国',
'中国远洋捕捞人员多遭威胁 近海渔业资源现枯竭',
'进口奶市场渠道混乱 专家：购买需量力而为',
            ]
var len=arr.length;
oBtn.onclick=function(){
for(var i=0;i<len;i++){
oUl.innerHTML+='<li>'+arr[i]+'</li>';
                    }
            };
        }
    </script>
</head>
<body>
    <input type="button" id="btn1" value="请点击我" />
    <ul id="list"></ul>
</body>
</html>



点击按钮自动生成五条新闻的完整案例，这时会出现不停的点击按钮不听生成新闻，如何让按钮点击只生成一次呢？这是开发人员经常会碰到的问题。有三种解决思路：
1、找按钮麻烦(不推荐，用户体验不好)
　　如：oBtn.disable=true;
　　　　oBtn.onlick=null;
2、先清空，再生成(影响浏览器的性能)
　　　　arr='';
3、加入判断（最佳解决方案）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自动生成五条新闻</title>
    <script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('list');
var arr=[
'李嘉诚：香港没资格“独立” “港独”脱离现实',
'澳门操纵卖淫案宣判：赌王侄子被判1年零1个月',
'中国赴美留学生抱怨班上中国人众多 犹如未出国',
'中国远洋捕捞人员多遭威胁 近海渔业资源现枯竭',
'进口奶市场渠道混乱 专家：购买需量力而为',
            ]
var len=arr.length;
var onOff=true;
oBtn.onclick=function(){
if(onOff){
for(var i=0;i<len;i++){
oUl.innerHTML+='<li>'+arr[i]+'</li>';
                    }
onOff=false;
                }
            };
        }
    </script>
</head>
<body>
    <input type="button" id="btn1" value="请点击我" />
    <ul id="list"></ul>
</body>
</html>

转载于:https://www.cnblogs.com/canghaigg/p/5291284.html