浅谈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>").appendTo($("#result"));  
7.         });  
8.         $("button").mouseup(function(){  
9.             $("<span>Mouseup!</span>").appendTo($("#result"));  
10.         });  
11.         $("button").click(function(){  
12.             $("<span>Click!</span>").appendTo($("#result"));  
13.         });  
14.     });  
15. </script>  

输出：Mousedown!Mouseup!Click!

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