最近更新
阅读排行
读过本文章的之后读了
关注本站

JS点击其他区域隐藏

阅读:15668 次   编辑日期:2014-04-21

目录:

概述:

工作中你是否遇到过点击一个按钮显示搜索框,点击搜索框之外的地方搜索框隐藏,点击搜索框之内的地方搜索框不隐藏的需求。
大致想一下应该不难,但是仔细想一想呢,没错其实逻辑不是这么简单的,因为浏览器的冒泡行为。
什么是冒泡之前讲过:《理解冒泡与捕获》
如何阻止冒泡之前也讲过:《如何阻止冒泡》
示意图

初步分析:

那么咱们把思路过一下,首先,点击按钮显示搜索框:
    $("#sbt").click(function(){
	    $("#search").show();
    })
这没什么难的,接下来咱们想想点击其他地方隐藏:

进一步分析:

   document.onclick = function(){
        $("#search").hide();
    }
这也很容易理解,那么如何做到点击搜索框区域不隐藏呢?

难点分析:

    //点击#sbt时要阻止冒泡,否则 #search 是不显示的,
    //因为冒泡了,会执行到下面的方法。
    $("#sbt").click(function(e){
            $("#search").show();
            var ev = e || window.event;
            if(ev.stopPropagation){
                ev.stopPropagation();
            }
            else if(window.event){
                window.event.cancelBubble = true;//兼容IE
            }
    })
    document.onclick = function(){
            $("#search").hide();
        }
    $("#search").click(function(e){
        var ev = e || window.event;
            if(ev.stopPropagation){
                    ev.stopPropagation();
             }
            else if(window.event){
                    window.event.cancelBubble = true;//兼容IE
            }
    })
查看实例
将本篇文章分享到:
top