<!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. 跳蚤APP

    1.项目描述 我们致力于制作一款服务于校内师生的物品转让平台,在此平台上的用户可以发布要转让或欲购买的物品信息. 2.创新与收益 Need(需求) 如今在市场上有许多的二手交易线上平台,它们的服务范围 ...

  2. 冲刺ing-5

    第五次Scrum冲刺 队员完成的任务 队员 完成任务 吴伟华 Leangoo的看板截图,燃尽图 蔺皓雯 编写博客 蔡晨旸 测试 曾茜 测试 鲁婧楠 测试 杨池宇 测试 成员遇到的问题 队员 问题 吴伟 ...

  3. 读<<我是IT小小鸟>>

    <倔强><怒放的生命>以歌曲的含义来引入文章,让文章可以与音乐产生共鸣让读者可以直接明了的就直击到本篇文章的中心含义是非常受用的,在文中写了许多以自己为视角,以自己的成长经历来 ...

  4. request内置对象在JSP

  5. 【week11】回顾

    一.回答五个问题 第一次阅读<构建之法>之后的五个问题: 1.关于敏捷,书中说了我理解的就是介绍了敏捷就是“没有既定的计划与文档,马上写代码,随时发牢骚”,但是开发也是需要有一定的流程的, ...

  6. UserAgent 设置 php 抓取网页

    转载:http://www.webkaka.com/tutorial/php/2013/111846/ hp抓取网页,可谓轻而易举,几行代码就可以搞定.不过,如果你有所疏忽,程序写得不够严密,就会出现 ...

  7. webgl 深度缓冲

    传统的画2d画布就是后画的会盖在先画的上面,但是在画一些三维图形时,这很难控制 深度缓冲区的作用就是区分颜色所在的层次,防止把被遮挡住的颜色显示出来. 深度缓冲很强大,用起来很简单 开启深度缓冲(测试 ...

  8. sublime text3 php开发必要的插件

    一.安装Sublime Text 3 官网 http://www.sublimetext.com/3 一定要选择ST3,而不是ST2,3比2好用,真的,后面你就知道了. 选择对应的版本安装.完事后,要 ...

  9. DNS原理及解析过程

    本文主要参考自:http://369369.blog.51cto.com/319630/812889 并做了小幅修改 什么是DNS? 因特网上的主机和人类一样,也可以使用多种方式进行识别.主机的一种识 ...

  10. 【C++】深度探索C++对象模型读书笔记--构造函数语义学（The Semantics of constructors）（四）

    成员们的初始化队伍(member Initia 有四种情况必须使用member initialization list: 1. 当初始化一个reference member时: 2. 当初始化一个co ...