网站首页学无止境JS

JS点击其他区域隐藏

发布时间：2016-03-01 16:14:37编辑：songlin阅读（94）

工作中你是否遇到过点击一个按钮显示搜索框，点击搜索框之外的地方搜索框隐藏，点击搜索框之内的地方搜索框不隐藏的需求。大致想一下应该不难，但是仔细想一想呢，没错其实逻辑不是这么简单的，因为浏览器的冒泡行为。

 

#document
#sbt
#search

1.那么咱们把思路过一下,首先，点击按钮显示搜索框:

1. $("#sbt").click(function(){ 
2.     $("#search").show(); 
3. }) 

2.click document隐藏search

1. document.onclick = function(){ 
2.      $("#search").hide(); 
3.  } 

难点分析：

1. //点击#sbt时要阻止冒泡，否则 #search 是不显示的， 
2. //因为冒泡了，会执行到下面的方法。 
3. $("#sbt").click(function(e){ 
4.         $("#search").show(); 
5.         var ev = e || window.event; 
6.         if(ev.stopPropagation){ 
7.             ev.stopPropagation(); 
8.         } 
9.         else if(window.event){ 
10.             window.event.cancelBubble = true;//兼容IE 
11.         } 
12. }) 
13. document.onclick = function(){ 
14.         $("#search").hide(); 
15.     } 
16. $("#search").click(function(e){ 
17.     var ev = e || window.event; 
18.         if(ev.stopPropagation){ 
19.                 ev.stopPropagation(); 
20.          } 
21.         else if(window.event){ 
22.                 window.event.cancelBubble = true;//兼容IE 
23.         } 
24. })