浏览器blur事件和click事件

最近做项目又回到Web前端，遇到一个棘手的问题。

代码如下：

mobile: <input id="mobile" type="text" />
<a id="btnSubmit" href="javascript:void(0)">submit</a>
<script src="jquery.js"></script>
<script>
$('#mobile').blur(function() {
    alert('blur');
});

$('#btnSubmit').click(function() {
    alert('click');
});
</script>

 先点击mobile输入域，让它聚焦，然后再点击submit的时候，会弹出blur，而click不会弹出，可见click事件并不会发生。IE8和FF均是如此，然后实际的项目中需要在用户点击submit时候，触发click事件，弹出对话框。

 

百般无奈，只得寻求workaround

1. 把click换成mousedown，click弹出了，但blur发生了两次，最后一次blur的结果把submit的结果给冲掉了（需求是：用户点击submit的时候，验证mobile不能为空，且报错，而未点击submit只是mobile域失去焦点，mobile为空不报错）。 弄了半天用什么时间戳表示用户点击和浏览器触发等，都很麻烦，后来同事想到个办法：

mobile: <input id="mobile" type="text" />
<a id="btnSubmit" href="javascript:void(0)">submit</a>
<script src="jquery.js"></script>
<script>
$('#mobile').blur(function(e) {
    alert('blur');
});

$('#btnSubmit').mousedown(function(e) {
    setTimeout(function() {
		alert('click');
		},100);
});

</script>

 这样，mousedown事件就一定在blur事件之后执行了，且100毫秒的时间用户是感知不到的。厉害！