<input id="btnClick" type="button" value="原生写法" class="btn-green radius" />
                            <div id="pop" class="centerDiv radius" style="width: 260px; height: 100px; border:1px solid #ddd; background:#f7f7f7; color:#000;">
                                当点击按钮后显示隐藏层,满足鼠标在div里操作不隐藏,在外边点击会消失的功能。
                                逻辑上主要是阻止浏览器的冒泡<br />

</div>

<script type="text/JavaScript">
       
        //点击#btnClick时要阻止冒泡,否则.pop是不显示的,
        //因为冒泡了,会执行到下面的方法。
        function stopPropagation(e) {
            var ev = e || window.event;
            if (ev.stopPropagation) {
                ev.stopPropagation();
            }
            else if (window.event) {
                window.event.cancelBubble = true;//兼容IE
            }
        }
        $("#btnClick").click(function (e) {
            $("#pop").show();
            stopPropagation(e);
        });
        $(document).bind('click', function () {
            $("#pop").hide();
        });
        $("#pop").click(function (e) {
            stopPropagation(e);
        });
    </script>

点击一个按钮显示div,点击div之外的地方div隐藏,点击div之内的地方div不隐藏相关推荐

  1. 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏...

    <!DOCTYPE html> <html style="font-size: 24px"> <head><title>js点击按钮 ...

  2. jq实现点击一个按钮,触发另一个点击事件(点击按钮触发另一个按钮的点击事件)

    jq实现点击一个按钮,触发另一个点击事件 $("#a").click(function(){$("#b").trigger('click');}) 实现点击完i ...

  3. vue 点击一个按钮触发两个事件_vue事件点击穿透解决大法

    最近在做项目的过程中遇到一个非常奇葩的bug,在h5页面点击一个按钮弹出弹窗,但是这个弹窗刚出现就会自动消失,导致屏幕出现闪动现象,关键这个bug还是偶现的.经过一番研究才发现是vue事件点击穿透引起 ...

  4. 在可编辑表格EditorGrid中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍然被插入数据库中...

    为什么80%的码农都做不了架构师?>>>    问题描述:在可编辑表格中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍 ...

  5. html中点击提交按钮显示提交i成功,百里香叶:点击提交按钮后显示成功信息

    我有一个spring-boot申请,Thymeleaf.我有非常基本的情况.有一个表单,当用户点击提交按钮时,表单数据应发送到控制器,但在同一页面中应显示成功消息.百里香叶:点击提交按钮后显示成功信息 ...

  6. Creator新手引导 | 限制只能点击一个按钮 | 文字打字机效果

    效果 实现这个非常简单巧妙 源码在文末 实现思路 节点有点多,一个一个讲解下 bg是游戏背景图,主要是为了和灰黑色的遮罩区别 Btn_parent是三个按钮的父节点,加了一个layout,使每个按钮不 ...

  7. 让一个按钮自动触发,自动执行onclick鼠标单击事件. 默认已点击.

    这里我的按钮是jsp中的一个<a>标签写的,下面是定时两秒默认点击,当然,想直接默认点击的话就直接把方法里面的毫秒值2000删除就可以了,也可以自行设置毫秒值进行定时. <scrip ...

  8. MFC 点击一个按钮去触发DATE TIME PICKER的DTN_DROPDOWN事件

    转自:https://zhidao.baidu.com/question/135291549740469005.html 我想点击一个button控件去把date time picker控件的下拉框给 ...

  9. html点击一个文字显示提示框,点击文字弹出一个DIV层窗口代码

    点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; ...

最新文章

  1. windows7下vs2008常见错误解决方法汇总
  2. 数据类型转换(Java)
  3. python【蓝桥杯vip练习题库】BASIC-17矩阵乘法(枚举)
  4. 我的第一份vPlan衍变路线
  5. 如何优化MySQL千万级大表
  6. Device /dev/ttyUSB0 is locked.解决办法
  7. 几种SQL取日期部分的方法
  8. 最小生成树基础 (Kruskal)
  9. filter和map的区别
  10. python matplotlib数据可视化教程_Python使用matplotlib实现数据可视化教程
  11. 【CCCC】L3-018 森森美图 (30分),计算几何+判断三点共线+bfs最短路
  12. Java中List,ArrayList、Vector,map,HashTable,HashMap区别用法
  13. 美国大学生数学建模竞赛O奖最高级别国家一等奖论文超全资料分享写作排版编程建模全覆盖资料参赛真实经历小白必拥有
  14. 数学建模经验分享及比赛时间汇总
  15. 大数据技术在银行业中的应用场景,主要有哪些?
  16. 实现同比、环比计算的N种姿势
  17. 计算机显卡怎样安装方法,电脑显卡怎么安装?轻松安装电脑显卡的方法
  18. 985高校计算机专业炉气分数,【原创】外地985高校专业录取分数解析(一)
  19. TODA WMS(仓库管理系统)简介
  20. 详解JS中的TDZ(暂时性死区)

热门文章

  1. nginx配置yum源
  2. 软件设计模式_行为型模式
  3. Java小白StudyDay06---oop类 对象 封装
  4. mysql5.7.35安装配置教程【超级详细安装教程】
  5. Android 修改系统字体大小,导致页面展示异常解决方案
  6. Oracle排序函数详解
  7. PID 和PPID的区别
  8. 鸿蒙os骁龙845,罕见的双屏安卓机:搭载骁龙845+10G内存,五百块捡漏
  9. 推荐系统(四)Field-aware Factorization Machines(FFM)
  10. 天龙八部服务器端共享内存的设计(3/3)