网站首页学无止境JS

JS点击其他区域隐藏

发布时间:2016-03-01 16:14:37编辑:songlin阅读(75)

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

     

    #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. })