关于防止表单多次提交~按钮多次点击~限制点击事件

时间：2024-04-17 16:32:17

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

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

相关文章