浅谈blur与click冲突的问题

1、blur事件：

当元素失去焦点时触发，表单事件，不可冒泡。

eg：

$(document).ready(function(){
	$(document).blur(function(){
		alert("Click,too!");
	});
	$("input").blur(function(){
		alert("Click!");
	});
});

输出：Click!

2、click事件

当点击元素时触发，所有元素均有的事件，可冒泡。

$(document).ready(function(){
	$(document).click(function(){
		alert("Click,too!");
	});
	$("input").click(function(){
		alert("Click!");
	});
});

输出：Click!和Click.too!

3、blur与click冲突

eg：

$(document).ready(function(){
	$("button").click(function(){
		alert("Click!");
	});
	$("input").blur(function(){
		alert("Blur!");
	});
});

输出：Blur!

原因：JavaScript为单线程，同一时间只能执行处理一个事件。blur事件会优先于click事件执行。

解决方法一：

延迟blur事件，让click事件先执行。

$(document).ready(function(){
	$("button").click(function(){
		alert("Click!");
	});
	$("input").blur(function(){
		setTimeout(function(){
			alert("Blur!");
		}, 300);
	});
});

输出：Click!和Blur!

解决方法二：

click事件改为mousedown事件，让其先执行。

$(document).ready(function(){
	$("button").mousedown(function(){
		alert("Click!");
	});
	$("input").blur(function(){
		alert("Blur!");
	});
});

输出：Click!和Blur!

mousedown：鼠标按键被按下时触发。 

mouseup：松开鼠标按键时触发。

eg：

<button>提交</button>
<div id="result"></div>
<script>
	$(document).ready(function(){
		$("button").mousedown(function(){
			$("<span>Mousedown!</span>").appendTo($("#result"));
		});
		$("button").mouseup(function(){
			$("<span>Mouseup!</span>").appendTo($("#result"));
		});
		$("button").click(function(){
			$("<span>Click!</span>").appendTo($("#result"));
		});
	});
</script>

输出：Mousedown!Mouseup!Click!

结论：执行顺序为mousedown事件-->mouseup事件-->click事件