<!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. HDU 4489 The King’s Ups and Downs dp

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4489 The King's Ups and Downs Time Limit: 2000/1000 ...

  2. 安装DHCP 服务器 指的是由服务器控制一段IP地址范围，客户机登录服务器时就可以自动获得服务器分配的IP地址和子网掩码

    DHCP服务详解 前言:动态主机配置协议,给局域网内的主机分配IP地址,子网掩码,网关,DNS ARP协议 arp: address resolveing protocol (地址解析协议) 实现:I ...

  3. 【C】多线程编程笔记

    1. pthread_create(pthread类型指针变量 ,NULL ,函数 ,函数参数[多个参数用结构体传]) 2. pthread_join(pthread类型指针变量, 返回一般为null ...

  4. tooltips & click copy

    tooltips & click copy shit antd & tooltips & click copy https://codesandbox.io/s/zx4wo7y ...

  5. php 单文件测试代码时必加入的代码

    有时候为了解决BUG,需要测试一些函数或代码最终实现的效果,来排除一些影响因素.这时候需要把代码单独拎出来,放在一个php单文件中来测试.在头部最好加上三句代码如下: <?php ini_set ...

  6. angular 延迟更新方法

    失去焦点后更新: <input ng-model="name" ng-model-options="{updateOn:'blur'}" />{{n ...

  7. Infinity NaN undefined和null

    Infinity属性用于存放表示正无穷大的数值. 负无穷大是表示负无穷大一个数字值. 该属性为Global对象的一个只读属性, 所有主流浏览器均支持该属性. Infinity属性的值为Number类型 ...

  8. Keywords Search HDU - 2222（ac自动机板题。。）

    求一个字符串上有多少个匹配的单词 看着卿学姐的板子写的 指针形式: #include <iostream> #include <cstdio> #include <sst ...

  9. Intel WIDI (Wireless Display) 相关技术知识分析

    一. WIFI 1.如何查找WIFI设备 非p2p设备 Beacons 包(同步,SSID) 速率 1M/s 2.4G HZ 13个信道,1,6,11三个信道不重叠 2.P2P 认证 客户端在每个通道 ...

  10. [洛谷P4563][JXOI2018]守卫

    题目大意:有一段$n(n\leqslant5\times10^3)$个点的折线,特殊点可以覆盖它以及它左边的它可以“看见”的点(“看见”指连线没有其他东西阻挡).定义$f_{l,r}$为区间$[l,r ...