js怎么避免click短时间的多次执行

Posted 2023-04-08

比如楼下说的方法，可以设置JS变量来，或者再标签上加自己定义属性，示例如下：

<input type="button" value="测试" state="0" id="btn" />
<script type="text/javascript">
    // JS的做法, 当然下面的也可以把点击时间做成函数，然后添加到空间上面
    document.getElementById("btn").onclick = function() 
        //获取按钮点击状态
        var s = this.getAttribute("state");
        if(s == '1') 
            alert("系统处理中，请不要重复点击！");
         else 
            // 设置点击状态，执行业务逻辑，设置处理中
            this.setAttribute("state", "1")
        
        // 下方写你的其他代码
        
        this.setAttribute("state", "0"); // 设置点击状态，执行完成清空点击
    
    // jQuery的做法
    $("#btn").click(function() 
        //获取按钮点击状态
        var s = $(this).attr("state");
        if(s == '1') 
            alert("系统处理中，请不要重复点击！");
         else 
            // 设置点击状态，执行业务逻辑，设置处理中
            $(this).attr("state", "1")
        
        // 下方写你的其他代码
        
        $(this).attr("state", "0"); // 设置点击状态，执行完成清空点击
    );
</script>

参考技术A 设置使能标记

避免多次提交

避免多次提交的方法:

1. 第一次提交表单后 就禁用提交按钮。 利用 disabled属性

$(element).attr("disabled", true)

2. 利用onsubmit事件处理 取消后续的表单提交操作《javascript高级教程3》

监听submit事件，并在该事件发生时就禁用提交按钮。

注：不能通过click事件实现，原因是不同browser处理submit和click的时机不同。

 EventUtil.addHandle(formElement, "submit", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var btn = target.elements["submit-btn"]; //取得提交按钮

    btn.disabled = true; //禁用  
  })

 

     

附加  EventUtil对象

参考：http://www.cnblogs.com/hykun/p/EventUtil.html

var EventUtil={
    
   addHandler:function(element,type,handler){ //添加事件
      if(element.addEventListener){ 
         element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件
      }else if(element.attachEvent){                    //使用IE方法添加事件
         element.attachEvent("on"+type,handler);
      }else{
         element["on"+type]=handler;          //使用DOM0级方法添加事件
      }
   },  

   removeHandler:function(element,type,handler){  //取消事件
      if(element.removeEventListener){
         element.removeEventListener(type,handler,false);
      }else if(element.detachEvent){
         element.detachEvent("on"+type,handler);
      }else{
         element["on"+type]=null;
      }
   },

   getEvent:function(event){  //使用这个方法跨浏览器取得event对象
      return event?event:window.event;
   },
    
   getTarget:function(event){  //返回事件的实际目标
      return event.target||event.srcElement;
   },
    
   preventDefault:function(event){   //阻止事件的默认行为
      if(event.preventDefault){
         event.preventDefault(); 
      }else{
         event.returnValue=false;
      }
   },

   stopPropagation:function(event){  //立即停止事件在DOM中的传播
                                     //避免触发注册在document.body上面的事件处理程序
      if(event.stopPropagation){
         event.stopPropagation();
      }else{
         event.cancelBubble=true;
      }
   },
        
   getRelatedTarget:function(event){  //获取mouseover和mouseout相关元素
      if(event.relatedTarget){
         return event.relatedTarget;
      }else if(event.toElement){      //兼容IE8-
         return event.toElement;
      }else if(event.formElement){
         return event.formElement;
      }else{
         return null;
      }
   }
 ,
        
   getButton:function(event){    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
      if(document.implementation.hasFeature("MouseEvents","2.0")){
         return event.button;
      }else{
         switch(event.button){   //将IE模型下的button属性映射为DOM模型下的button属性
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
               return 0;  //按下的是鼠标主按钮（一般是左键）
            case 2:
            case 6:
               return 2;  //按下的是中间的鼠标按钮
            case 4:
               return 1;  //鼠标次按钮（一般是右键）
         }
      }
   },
        
   getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值
      if(event.wheelDelta){
         return event.wheelDelta;
      }else{
         return -event.detail*40;
      }
   },
        
   getCharCode:function(event){   //以跨浏览器取得相同的字符编码，需在keypress事件中使用
      if(typeof event.charCode=="number"){
         return event.charCode;
      }else{
         return event.keyCode;
      }
   }
        
};
        

EventUtil对象