<!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. Github二次学习

    作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正. 本节课视频内容:https://www ...

  2. 【转】React-Native 实现增量热更新的思路

    所谓热更新就是在不重新安装的前提下进行代码和资源的更新,相信在整个宇宙中还不存在觉得热更新不重要的程序猿. 增量热更新就更牛逼了,只需要把修改过和新增的代码和资源推送给用户下载即可,增量部分的代码和资 ...

  3. mysql常用语句入门整理

    这篇属于小白入门级别,如果你已经高手可以直接跳过 1.运行数据库mysqld.exe,客户端直接mysql -uroot(root是默认用户名) -p 2 showdatabases,showtabl ...

  4. Scrum立会报告+燃尽图（十月十三日总第四次）：前期宣传相关工作

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2194 Scrum立会master:刘欣 一.小组介绍 组长:付佳 组员: ...

  5. Thunder团队Final周贡献分分配结果

    小组名称:Thunder 项目名称:爱阅app 组长:王航 成员:李传康.翟宇豪.邹双黛.苗威.宋雨.胡佑蓉.杨梓瑞 分配规则 则1:基础分,拿出总分的20%(8分)进行均分,剩下的80%(32分)用 ...

  6. 依据Right-BICEP要求的对四则运算2的测试

    代码: #include <iostream> #include <time.h> #include <stdio.h> #include <stdlib.h ...

  7. CentOS 7 安装 MySql 8

    1-安装 CentOS 7   2-安装 NETCORE SDK      SDK 安装文档:https://dotnet.microsoft.com/download/linux-package-m ...

  8. C#高级编程 (第六版) 学习 第七章：委托和事件

    第七章 委托和事件 回调(callback)函数是Windows编程的一个重要方面,实际上是方法调用的指针,也称为函数指针. .Net以委托的形式实现了函数指针的概念,.Net的委托是类型安全的. 委 ...

  9. 读着读着《构建之法》(Build To Win) 越精神的白雪儿的思考

    哲学家的宗旨是:我思,故我在 科学家的宗旨是:我发现,故我在 工程师的宗旨是:我构建,故我在 ——<工程学--无尽的前沿> 序言:珍惜角色“人”,注重实践“物” <构建之法>, ...

  10. 【转】mysql force Index 强制索引

    其他强制操作,优先操作如下: mysql常用的hint 对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的h ...