ajax同步或alert对onblur和onclick顺序有影响导致提交要点两次

<input id="phone" name="phone" onblur='checkPhone();' type="text">

<button type="button" id="sub" onclick='sub();'>提交</button>

<script type="text/javascript">
	function checkPhone(){alert('checkPhone');}
	function sub(){alert('sub');}
</script>

填写手机号码以后,立即点击提交,会发现只调用了checkPhone,没有调用到sub,点击第二次才调用sub。

如果不使用alert,换成比如$().html();其他的动作,不会出现这个情形。

预期的效果,是点击提交时先调用checkPhone,然后调用sub,但是却必须点击提交按钮两次才行。

这里把alert换成ajax提交并且设置参数异步async为false。效果和alert一样。如果设置为true,便正常。

原因就是alert和ajax同步时对onblur和onclick顺序有影响。似乎有某种锁定的作用。

解决办法:1个方法是onclick改为onmousedown,这样在鼠标击下时就会弹窗弹出来。onclick是击下并松开是才动作。这个方法不太符合操作习惯。

2是在ajax里面设置async为变量,默认为true。

var async = true;
$.ajax({
        	type: "post",
       	 	url: "/member/checkPhoneByMbId.do",
        	dataType: "json",
        	data:{
        		phone:$("#phone").val()
       		 },
        	async: async,
        	contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        	success: function(msg){
phoneFlag == true
})

提交时如果要调用一次onblur,则设置ajax为同步

async = false;
	$("#phone").blur();
	async = true;
if(phoneFlag == true)


猜你喜欢

转载自blog.csdn.net/u010653311/article/details/18180841
今日推荐