zoukankan      html  css  js  c++  java
  • js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936

    问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框?

    方案一:这个问题通常的办法是使用阻止事件冒泡来实现,代码如下(省略css):

    <body>
    <button id="btn1" onclick="alertBoxFn();stopBubble()">打开弹窗</button>
    <div id="alertBox" onclick="stopBubble()"></div>
    </body>
    <script>
    function alertBoxFn(e) {
    alertBox.style.display = "block";
    }
    function stopBubble(e){
    var e=e||window.event;
    e.stopPropagation()
    }
    document.body.addEventListener('click', function() {
    alertBox.style.display = 'none'
    })
    </script>

    但这有一个弊端,就是如果页面上需要有多个按钮分别控制多个弹框,需求是点击按钮1时显示弹框1,点击按钮2时显示弹框2,同时隐藏弹框1。但结果却是点击按钮2时,按钮1并不会隐藏。这是因为按钮2阻止了点击事件的冒泡,导致body元素的点击事件并没有被触发。于是,这里我们不能再使用阻止事件冒泡的方法了。

    方案二:声明一个变量用来判断鼠标是否点击的是按钮或弹框。代码如下(省略css):

    <body>
    <button id="btn" onclick="alertBoxFn()">打开弹窗</button>
    <div id="alertBox" onclick="outside=false"></div>
    </body>
    
    
    <script>
    var outside=true
    function alertBoxFn(e) {
    outside=false
    alertBox.style.display = "block";
    }

    //以下两个方法用于判断是点击按钮和弹框,还是弹框外面,如果点击弹框外面隐藏弹框,注document.body必须要在文档后面写,在head写documnet.body为null document.body.addEventListener(
    'click', function() { outside=true },true) document.body.addEventListener('click', function() { if(outside){ alertBox.style.display = 'none' } }) </script>
  • 相关阅读:
    MSComm控件进行串口编程的基本步骤(转载)
    Linux C Socket编程原理及简单实例(转载)
    ubuntu14.04英文环境下安装中文输入法(转载)
    2015高工机器人年会第一批100名参会嘉宾名单公布
    中国式人机协作
    优傲机器人:协作机器人助力电子制造业智能转型
    netty学习笔记
    画图模板
    文本建模
    自定义IP协议
  • 原文地址:https://www.cnblogs.com/lidaying5/p/11098377.html
Copyright © 2011-2022 走看看