部分业务要求除了某元素外点击其他对象，对应的元素隐藏，下面是一个demo效果，

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <style type="text/css">

        .fun-set-bg{width:%;height:%;overflow-x:hidden;overflow-y:auto;}

        .maskTask{width: %;position: fixed;opacity: .;left: ;top: ;height: %;z-index: ;background-color: #;display: none;}

        .maskCone{width: %;position: fixed;background-color: #fff;z-index: ;height: %;left: %;top: %;border-radius: 5px;padding: 10px 20px;display: none;}

        #btns{padding: 2px 8px;border-radius: 3px;}

    </style>

</head>

<body>

<div class="fun-set-bg">

    demo样式-

    <button class="starts">出现</button>

</div>

<div class="maskTask"></div>

<div class="maskCone">

    <p>阿部察察错错</p>

    <button id="btns">取消</button>

</div>

<script type="text/javascript" src="../../js/jquery_v3.3.1.js"></script>

<script>

$(function(){

    $(".starts").click(function(event){

        var e=window.event || event;

        if(e.stopPropagation){

            e.stopPropagation();

        }else{

            e.cancelBubble = true;

        }

        $(".maskCone,.maskTask").show();

    });

    $(".maskCone").click(function(event){

        var e=window.event || event;

        if(e.stopPropagation){

            e.stopPropagation();

        }else{

            e.cancelBubble = true;

        }

    });

    $(document).click(function(event) {

        $(".maskCone,.maskTask").hide();

    });

   $('#btns').click(function(event) {

        $(".maskCone,.maskTask").hide();

    });

})

</script>

</body>

</html>

js实现点击空白处隐藏的更多相关文章

  1. IOS 点击空白处隐藏键盘的几种方法

    IOS 点击空白处隐藏键盘的几种方法     IOS7 点击空白处隐藏键盘的几种方法   IOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能 ...

  2. IOS7 点击空白处隐藏键盘的几种方法

    IOS7 点击空白处隐藏键盘的几种方法   iOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们 ...

  3. react 点击空白处隐藏弹出层

    点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...

  4. IOS Swift UITableViewcontroller实现点击空白处隐藏键盘

    在ios开发中,为了方便,我们经常使用UITableViewcontroller,比如搜索界面为了方便可能更多的使用UITableViewcontroller,那么问题就来了,当我点击搜索框的时候会弹 ...

  5. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  6. 【Flutter 实战】全局点击空白处隐藏键盘

    老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘. 对于单个页面来说,通过为 T ...

  7. Andriod中自定义Dialog样式的Activity点击空白处隐藏软件盘（Dialog不消失）

    一.需求触发场景: 项目中需要出发带有EditText的Dialog显示,要求在编辑完EditText时,点击Dilog的空白处隐藏软键盘.但是Dialog不会消失.示例如下: 二.实现方法: 发布需 ...

  8. Vue 实现点击空白处隐藏某节点（三种方式：指令、普通、遮罩）

    在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架, ...

  9. 点击空白处隐藏div

    class="bigPic"的div是被显示或隐藏的div,另外.case > ul > li是class="bigPic"的父级元素 $(&quo ...

随机推荐

  1. leetcode.数组.16最接近的三数之和-java

    1. 具体题目 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案 ...

  2. C#WinForm 窗体回车替换Tab

    /// <summary> /// 回车切换控件 /// </summary> /// <param name="sender"></pa ...

  3. 68.最大k乘积问题 (15分)

    C时间限制:3000 毫秒 |  C内存限制:3000 Kb题目内容:设I是一个n位十进制整数.如果将I划分为k段,则可得到k个整数.这k个整数的乘积称为I的一个k乘积.试设计一个算法,对于给定的I和 ...

  4. ubuntu14.04标题栏显示上下网速

    首先当然是用 wget 下载 indicator-sysmonitor,终端执行命令: wget -c https://launchpad.net/indicator-sysmonitor/trunk ...

  5. zmq利用protobuf通信

    protobuf序列化之后为二进制数据,数据中可能包含 ‘\0’,直接转换为char *类型会导致发送数据不完整.解决方法: void buildProtobufMsg(const string&am ...

  6. 笔记45 Hibernate快速入门（二）

    Hibernate O/R 映射 一.多对一 一个Product对应一个Category,一个Category对应多个Product,所以Product和Category是多对一的关系.使用hiber ...

  7. [原创] delphi KeyUp、KeyPress、Keydown区别和用法，如何不按键盘调用事件

    KeyPress (Sender: TObject; var Key: Char);   当用户按下键盘上的字符键(字母,数字) 会触发该事件,功能键则不会(F1-F12,Ctrl,Alt,Shift ...

  8. Android客户端转换php服务端获取的时间戳的转换

    今天在用JSON获取后台的数据的时候,发现一个奇怪的现象就是返回来的时间戳都是1970年这样的,很是纠结,最后发现时php和Java中时间的格式不一样造成的,所以我们本地客户端要做一个转换: /** ...

  9. 字符串dp——牛客多校第五场G

    比赛的时候脑瘫了没想出来..打多校以来最自闭的一场 显然从s中选择大于m个数组成的数必然比t大,所以只要dp求出从s中选择m个数大于t的方案数 官方题解是反着往前推,想了下反着推的确简单,因为高位的数 ...

  10. NOIp2018集训test-9-5(pm)

    老张说:这套题太简单啦,你们最多两个小时就可以AK啦! 题 1 数数 我看到T1就懵了,这就是老张两个小时可以AK的题的T1?? 然后我成功地T1写了1h+,后面1h打了t2.t3暴力,就很开心. 等 ...