js弹出层点层以外任意地隐藏

最新推荐文章于 2020-08-13 10:44:46 发布

gui_198641

最新推荐文章于 2020-08-13 10:44:46 发布

阅读量292

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/gui_198641/article/details/84715560

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js弹出层点层以外任意地隐藏，这个问题很早之前解决过，自己比较偷懒就没记录下来，最近做一个效果再次碰到，网上搜到了相关方法，现在把方法整理一下

关键在 e.stopPropagation()方法，该方法是在Event对象中，说明是停止某事件的传播。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="js/jquery.min.js"></script>
    <style>
        div{
            position: absolute;
            width: 300px;
            height: 150px;
            border: 1px solid #ddd;
            background: #ddd;
            display: none;
            z-index: 99999;
        }


        span{
            position: absolute;
            left: 35%;
            top: 25%;
        }
    </style>


    <script>

        $(function (){

            $('#area').click(function(){
                var offset = $(this).offset();
                $('div').css({top:offset.top,left:offset.left});
                $('div').show();

                $('div').mousedown(function (e){
                    e.stopPropagation();
                });

                $(document).mousedown(function (){
                    $('div').hide();
                });
            });


        });

    </script>

</head>
<body>
   <span>
   地区:<input id="area" type="text"></span>


   <div >
       这是一个层
   </div>
</body>
</html>

gui_198641

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js弹出层点层以外任意地隐藏

js弹出层点层以外任意地隐藏，这个问题很早之前解决过，自己比较偷懒就没记录下来，最近做一个效果再次碰到，网上搜到了相关方法，现在把方法整理一下关键在 e.stopPropagation()方法，该方法是在Event对象中，说明是停止某事件的传播。相关说明：http://www.w3school.com.cn/jsref/event_sto...
复制链接

扫一扫

专栏目录