JS点击其他区域隐藏——应用级

最新推荐文章于 2022-11-18 16:30:47 发布

转载最新推荐文章于 2022-11-18 16:30:47 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dlgood/p/6549014.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现点击页面任意位置隐藏指定元素（如搜索框）的方法，并提供了兼容IE11的改进方案。

http://www.uw3c.com/jsviews/js57.html

<div id="sbt">search</div>
<div id="search" style="display: block;">点击其他区域隐藏</div>

<script type="text/javascript">
    $(function(){
        $("#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
            }
        })
    })
</script>

上面的程序IE11有时间不灵改了一下的写的方式

$(document).bind('click',function(){
                $('#test').css('display','none');
            });

完整如下;

<script type="text/javascript">
            function stopPropagation(e) {
                if (e.stopPropagation) 
                    e.stopPropagation();
                else 
                    e.cancelBubble = true;
            }

            $(document).bind('click',function(){
                $('#test').css('display','none');
            });

            $('#test').bind('click',function(e){
                stopPropagation(e);
            });
        </script>