<!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. 原生js和jquey获取窗口宽高，滚动条，鼠标位置总结

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度   alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...

  2. Arctic Network POJ 2349 (最小生成树思想)

    Description The Department of National Defence (DND) wishes to connect several northern outposts by ...

  3. 互评Alpha版本——可以低头，但没必要——取件帮

    基于NABCD评论作品,及改进建议: 1.根据(不限于)NABCD评论作品的选题 (1)N(Need,需求) 随着电商平台的发展,越来越多的人选择网购,但是东师的一部分快递网点不在校内,需要走很长的一 ...

  4. 作业要求20181016-3 Alpha阶段第1周/共2周 Scrum立会报告+燃尽图 01

    此次作业要求参见https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 Scrum master:范洪达 一.小组介绍 组长:王一可 组员 ...

  5. 冲刺ing-4

    第四次Scrum冲刺 队员完成的任务 队员 完成任务 吴伟华 Leangoo的看板截图,燃尽图 蔺皓雯 编写博客,学习后端设计 蔡晨旸 学习后端设计 曾茜 后端设计 鲁婧楠 服务器建构 杨池宇 学习后 ...

  6. Fiveplus--王者光耀1

    **光耀101** 汇总博客: 关文涛: 博客地址:随笔1 随笔2 杨蓝婷: 博客地址:随笔1 随笔2 蔡雅菁: 博客地址:随笔1 随笔2 黄森敏: 博客地址:随笔1 随笔2 林兴源: 博客地址:随笔 ...

  7. Objective - C 之延展

    延展:为已有的类新增私有方法,只能在本类中使用 一.创建过程: 二.总结: 1.延展只有.h文件,在其中写新方法的声明,在原本的类(Person)中写方法的实现: 2.上述的方法其实很不安全,因为如果 ...

  8. ZOJ3113_John

    这个题目是一个典型的Anti_Sg.我也不知道为什么这么叫,呵呵,反正大家都这么叫,而且我也是听别人说,看别人的日志自己才知道的. 题目的意思是给你不同颜色的石子,每次可以去一种颜色的石子若干个(至少 ...

  9. 迁移数据到历史表SQL(转)

    有时工作需要需要把当前表的数据,移到历史表中,而历史表基本是以时间(年)为后缀来命名历史表的,如 A_2011,A_2012,在移数据时,要按数据的时间,移到不同的表中,且由于如果数据有同步.一次处理 ...

  10. BZOJ5071 小A的数字

    设f[i]为选择i对i-1和i+1所带来的贡献.则有f[i-1]+f[i+1]+a[i]-2f[i]=b[i],特殊地,f[2]+a[1]=b[1],f[n-1]+a[n]-2f[n]=b[n].可以 ...