Web应用中使用javascript阻止某个提交按钮被重复点击

来源:互联网 发布:电子管设计软件 编辑:程序博客网 时间:2024/06/04 16:16
本来应用在服务器端有校验,对“连续猛击”导致的重复提交也就没太在意。
结果最近有几个页面因为机制原因,在服务器端没有及时加上重复提交校验,出了bug
于是拿起javascript来搞
想的是很简单,只要找到submit,onclick加个事件把自己disable1秒就可以了。
结果悲剧的发现在IE中,如果submit按钮被disable,就不会触发form的提交.
于是绕大圈去找不用disable能禁用一个按钮的方法。无果。
最后意外的发现,原先认为"如果submit按钮被disable,就不会触发form的提交."并不准确,
准确的说submit是在在onclick事件之后触发的。
在submit前的onclick事件中如果button被diable,估计submit时有检查submit按钮状态,若disabled则form不提交。
那么只要是在submit触发后再disabledsubmit按钮。就不影响提交。
于是乎,加了个settimeout。成功。
最终方法如下
function locksubmitbutton(){
var callbackfunction=function(){
var theEvent = window.event || arguments[0];
var itemx= theEvent.srcElement||theEvent.target;
setTimeout(function(){itemx.disabled=true;},0);
setTimeout(function(){itemx.disabled=false;},1000);
};
var vTag = document.getElementsByTagName("INPUT");
for(var i=0;i<vTag.length;i++){
if(vTag[i].type=="submit"){
vTag[i].attachEvent?vTag[i].attachEvent("onclick",callbackfunction):vTag[i].addEventListener("click",callbackfunction,false);
}
}
}
原创粉丝点击