關於防止表單多次提交~按鈕多次點擊~限制點擊事件

為了防止用戶多次提交表單我們可以有多種處理方法,以下做一些簡單的說明

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