浅谈blur与click冲突的问题

浅谈blur与click冲突的问题
1、blur事件：
当元素失去焦点时触发，表单事件，不可冒泡。

eg：
[html] view plain copy
print?
1.$(document).ready(function(){
2.$(document).blur(function(){
3.alert("Click,too!");
4.});
5.$("input").blur(function(){
6.alert("Click!");
7.});
8.});
输出：Click!
2、click事件
当点击元素时触发，所有元素均有的事件，可冒泡。

[html] view plain copy
print?
1.$(document).ready(function(){
2.$(document).click(function(){
3.alert("Click,too!");
4.});
5.$("input").click(function(){
6.alert("Click!");
7.});
8.});
输出：Click!和Click.too!
3、blur与click冲突
eg：
[html] view plain copy
print?
1.$(document).ready(function(){
2.$("button").click(function(){
3.alert("Click!");
4.});
5.$("input").blur(function(){
6.alert("Blur!");
7.});
8.});
输出：Blur!
原因：JavaScript为单线程，同一时间只能执行处理一个事件。

blur事件会优先于click事件执行。

解决方法一：
延迟blur事件，让click事件先执行。

[html] view plain copy
print?
1.$(document).ready(function(){
2.$("button").click(function(){
3.alert("Click!");
4.});
5.$("input").blur(function(){
6.setTimeout(function(){
7.alert("Blur!");
8.}, 300);
9.});
10.});
输出：Click!和Blur!
解决方法二：
click事件改为mousedown事件，让其先执行。

[html] view plain copy
print?
1.$(document).ready(function(){
2.$("button").mousedown(function(){
3.alert("Click!");
4.});
5.$("input").blur(function(){
6.alert("Blur!");
7.});
8.});
输出：Click!和Blur!
mousedown：鼠标按键被按下时触发。

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

eg：
[html] view plain copy
print?
1.<button>提交</button>
2.<div id="result"></div>
3.<script>
4.$(document).ready(function(){
5.$("button").mousedown(function(){
6.$("<span>Mousedown!</span>").appendT o($("#result"));
7.});
8.$("button").mouseup(function(){
9.$("<span>Mouseup!</span>").appendTo($("#result"));
10.});
11.$("button").click(function(){
12.$("<span>Click!</span>").appendT o($("#result"));
13.});
14.});
15.</script>
输出：Mousedown!Mouseup!Click!
结论：执行顺序为mousedown事件-->mouseup事件-->click 事件。