<!DOCTYPE html>

<html style="font-size: 24px">

<head>

    <title>js点击按钮显示再点击空白地方隐藏</title>

    <style type="text/css">

        #div {

            border: 1px solid red;

            display: flex;

            align-items: center;

            justify-content: center;

            display: none;

            font-size: 2rem

        }

    </style>

</head>

<body>

    <div id="div">这是div的内容</div>

    <button onclick="show()">点击我</button>

<script type="text/javascript">

    function show (event) {

        //取消冒泡

        let oevent = event || window.event

        if (document.all) {

            oevent.cancelBubble = true

        } else {

            oevent.stopPropagation()

        }

        if (document.getElementById('div').style.display === 'none' || document.getElementById('div').style.display === '') {

            document.getElementById('div').style.display = 'block'

        } else {

            document.getElementById('div').style.display = 'none'

        }

    }

    document.onclick = function () {

        document.getElementById('div').style.display = 'none'

    }

    document.getElementById('div').onclick = function (event) {

        let oevent = event || window.event

        oevent.stopPropagation()

    }

</script>

</body>

</html>

原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏的更多相关文章

  1. 【2048小游戏】——原生js爬坑之遍历算法显示二维数组内容

    引言:做2048小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储    首先考虑用二维数组存储所有行数,列数   ...

  2. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  3. 原生js实现头像大屏随机显示

    效果如下图所示: 一.html部分 <div class="myContainer"> <ul> <li class="first" ...

  4. 最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理

    废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...

  5. DrawRightEditText自定义EditText实现有内容时右侧图标按钮显示无内容时右侧图标按钮隐藏加上为空时晃动动画（二）

    经过大神指导,上面封装的还不够全面,触摸事件应该也放进自定义中去,那么问题来了,怎么区分呢!,这就涉及到了自定义属性的介绍了 我通过设置属性来判断在onTouch事件中应该进行什么操作,接下来看看改良 ...

  6. 点击除指定区域外的空白处，隐藏div

    <script> $(document).click(function (e) { var $target = $(e.target); //点击.zanpl和.quanzipl以外的地方 ...

  7. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  8. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  9. 一次和别人争吵一个按钮，点击后显示导航；再点击不显示的效果，是否一定以及必须用js?

    事情经过是这样的,我们组一个说话很喜欢用一定,肯定的哥们,吃午饭的时候拿了自己做的一个UI库,头部有一个按钮 点击展开,再次点击收缩,他意思说一个按钮无法记录点击状态,必须使用js.然后我看了一眼,心 ...

随机推荐

  1. ES6中Class的继承关系

    es5实现中,每个对象都有__proto__属性(也就是关系图中[[prototype]]属性),指向对应的构造函数的prototype.Class 作为构造函数的语法糖,同时有prototype属性 ...

  2. Alpha冲刺——第十天

    Alpha第十天 听说 031502543 周龙荣(队长) 031502615 李家鹏 031502632 伍晨薇 031502637 张柽 031502639 郑秦 1.前言 任务分配是VV.ZQ. ...

  3. 做更好的自己 ——读《我是IT小小鸟》有感

    转眼间大一已经过了一大半了,到了大学,才发现初高中时父母所说的“到了大学你就轻松了···”都是骗人的.但我脑海里却一直被这个观点所支配,以至于我在大一上学期里无所事事,不知道干些什么.学习也没重视,分 ...

  4. C#高级编程 (第六版) 学习 第四章：继承

    第四章 继承 1,继承的类型 实现继承: 一个类派生于一个基类型,拥有该基类型所有成员字段和函数. 接口继承 一个类型只继承了函数的签名,没有继承任何实现代码.   2,实现继承 class MyDe ...

  5. 第四章 深入JSP技术

    JSP简介 JSP工作原理 JSP是一种servlet,但先部署后编译. JSP生命周期 运行时只会有一个实例,同servlet. JSP语法 JSP元素和模板数据 模板数据就是JSP中的HTML代码 ...

  6. TCP系列48—拥塞控制—11、FRTO拥塞撤销

    一.概述 FRTO虚假超时重传检测我们之前重传章节的文章已经介绍过了,这里不再重复介绍,针对后面的示例在说明两点 1.FRTO只能用于虚假超时重传的探测,不能用于虚假快速重传的探测. 2.延迟ER重传 ...

  7. nginx　简介　　http://nginx.org

    Nginx(一) 官方技术文档网站:http://nginx.org Nginx的特性 1:各功能基于模块化设计,扩展性好   2:支持平滑重启,实现应用不下线部署   3:在多并发请求模型下,内存消 ...

  8. 软工网络15团队作业4-DAY6

    每日例会 昨天的工作. 张陈东芳:sql语句查询商品信息 吴敏烽:商品类的规范化编写 周汉麟:界面的排版优化 林振斌:商品类排序的实现 李智:研究商品信息的显示 全体人员:初次统一调试 今天计划的工作 ...

  9. Java 面试前的基础准备 - 01

    使用这个在线网页编辑真的是不习惯,还是 windows live writer 好. 下面列一个清单用于最近的面试:( 清单是网上down的 ) static,final,transient 等关键字 ...

  10. android studio 运行太慢了

    Android Studio每次升级/安装 Android Studio 之后最好都修改一下这个参数:到 Android Studio 安装目录,找到 bin/studio(64?).vmoption ...