首页 > 技术文章 > 关于防止表单多次提交~按钮多次点击~限制点击事件

dancer0321 2020-08-04 11:09 原文

为了防止用户多次提交表单我们可以有多种处理方法,以下做一些简单的说明

1.通过css设置属性 pointer-events: none;

  这个属性是css的特殊属性,他更像是javaScript,它能:

  • 阻止用户的点击动作产生任何效果
  • 阻止缺省鼠标指针的显示
  • 阻止CSS里的 hover 和 active 状态的变化触发事件
  • 阻止JavaScript点击动作触发的事件

  pointer-events属性有很多值,但是对于浏览器来说,只有auto和none两个值可用

2.通过disabled属性禁止提交按钮

  <button type="button" disabled="disabled">Click Me!</button>

  jq语法 设置  $("button").attr("disabled","true"); === $("button").attr("disabled","disabled");

     移除  $("button").attr("disabled","false");===$("button").removeAttr("disabled");

3.通过设置定时器防止一定时间内连续点击提交

  btn.onclick = function oper(){

    //执行一次 过3秒结束 才能点击
    btn.onclick = null;
    clearTimeout(timer);
    var timer = setTimeout(function(){
      btn.onclick = oper;
    },3000);
  }

4.通过设置一个变量记录提交次数

  如果用户已经单击“提交”按钮,该脚本会自动记录当前的状态,并将submitcount变量自加1,

  当用户试图再次提交时,脚本判断submitcount变量值非零,提示用户已经提交,从而避免重复提交表单。

var submitcount=0;
  function submitOnce (form){
    if (submitcount == 0){
    submitcount++;
    return true;
    } else{
      alert("正在操作,请不要重复提交,谢谢!");
      return false;
    }
  }
 
 
转载于:https://www.cnblogs.com/jialun-Online/p/10654885.html

推荐阅读