避免多次提交
Posted 永醉雨辰
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了避免多次提交相关的知识,希望对你有一定的参考价值。
避免多次提交的方法:
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; } } };
以上是关于避免多次提交的主要内容,如果未能解决你的问题,请参考以下文章