单击 div 外部以在纯 JavaScript 中隐藏 div

Question

我想制作一个弹出窗口，该弹出窗口应在单击按钮后出现，并在用户在框外单击时消失。

我不知道当我点击它之外时如何使 div 消失。

var popbox = document.getElementById("popbox");

document.getElementById("linkbox").onclick = function () {
    popbox.style.display = "block";
};

???.onclick = function () {
    popbox.style.display = "none";
};

Answer 1

这是第二个版本，根据 cmets 中的提问者的要求，它具有透明覆盖层...

window.onload = function(){
	var popup = document.getElementById('popup');
    var overlay = document.getElementById('backgroundOverlay');
    var openButton = document.getElementById('openOverlay');
    document.onclick = function(e){
        if(e.target.id == 'backgroundOverlay'){
            popup.style.display = 'none';
            overlay.style.display = 'none';
        }
        if(e.target === openButton){
         	popup.style.display = 'block';
            overlay.style.display = 'block';
        }
    };
};

#backgroundOverlay{
    background-color:transparent;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:block;
}
#popup{
    background-color:#fff;
    border:1px solid #000;
    width:80vw;
    height:80vh;
    position:absolute;
    margin-left:10vw;
    margin-right:10vw;
    margin-top:10vh;
    margin-bottom:10vh;
    z-index:500;
}

<div id="popup">This is some text.<input type="button" id="theButton" value="This is a button"></div>
    <div id="backgroundOverlay"></div>
    <input type="button" id="openOverlay" value="open popup">

这是第一个版本...

这是一些代码。如果还有什么要补充的，请告诉我:)

事件 (e) 对象允许访问有关事件的信息。 e.target 为您提供触发事件的元素。

window.onload = function(){
  var divToHide = document.getElementById('divToHide');
  document.onclick = function(e){
    if(e.target.id !== 'divToHide'){
      //element clicked wasn't the div; hide the div
      divToHide.style.display = 'none';
    }
  };
};

<div id="divToHide">Click outside of this div to hide it.</div>

Answer 2

这是我在点击外部时用来关闭侧边栏的代码

function openNav() {
    document.getElementById("mySidebar").style.width = "100px";
    document.getElementById("curtain_menu").style.marginLeft = "100px";
}

function closeNav() {
    document.getElementById("mySidebar").style.width = "0";
    document.getElementById("curtain_menu").style.marginLeft = "0";
}

document.onclick = function (e) {
    if (e.target.id !== 'mySidebar' && e.target.id !== 'btn_frontpage_menu') {
        if (e.target.offsetParent && e.target.offsetParent.id !== 'mySidebar')
            closeNav()
    }
}

.sidebar {
  font-family: sans-serif;
  height: 50%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  opacity: 0.9;
}

.sidebar a,
.dropdown-btn {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1vw !important;
  color: rgb(195, 195, 195);
  display: block;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: 0.3s;
  border: none;
}

.dropdown-container a {
  color: rgb(174, 174, 174) !important;
}

.sidebar a:hover,
.dropdown-btn:hover,
.dropdown-container a:hover {
  color: green !important;
  /* background-color: #5c5c5c; */
}

.sidebar .closebtn {
  position: absolute;
  top: 12px;
  font-size: 36px !important;
  margin-right: 5px;
  text-align: right;
  right: 20px;
}

.openbtn {
  font-size: 20px !important;
  cursor: pointer;
  background-color: transparent;
  color: black;
  padding: 6px 15px;
  border: none;
  float: left;
}

#main {
  position :absolute;
  width: 100%;
  height: 100%;
  left: 100px
}

<div id="mySidebar" class="sidebar" style="width: 100px;">
    <a href="javascript:void(0)" class="closebtn"
        onclick="closeNav()">×</a>
    <a href="">Home</a>
    <div class="dropdown-container">
        <a href="">Job Management</a>
        <a href="#">Request</a>
        <a href="#">Pending</a>
    </div>
</div>
<div id="curtain_menu">
    <button id="btn_frontpage_menu" class="openbtn" onclick="openNav()">☰</button>
    <div id="datetime"></div>
</div>
<div id="main"> Outside of 'Side Bar' is here
</div>

Answer 3

这里的想法是检测页面上的click events，并且仅当点击的目标不是div 后代之一时，才将container’s 显示设置为none。

HTML

<div id="container">
    <label>Enter your name:</label>
    <input type="text">
    <button id="submit">Submit</button>
</div>

JS

document.addEventListener('mouseup', function(e) {
    var container = document.getElementById('container');
    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
});

Answer 4

这是我的解决方案。

yourFunc=e=>{
  var popbox = document.getElementById("popbox");
  if(e.target.id !=="popbox"){
    popbox.style.display = "none";
    }else{
    popbox.style.display = "block";
    }
}


document.addEventListener("click",yourFunc)

Answer 5

希望这对你有用

 <script>
// Get the element
var modal = document.getElementById('modal');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

此代码已经过测试，运行良好，谢谢。

Answer 6

可以通过onblur 事件完成。

// required for focus
divEl.setAttribute('tabindex', '1');
divEl.onblur = event => {
  // hide only if blur occurred outside divEl, ignore its children
  if (!event.currentTarget.contains(event.relatedTarget)) {
    hide();
  }

  // re-focus, if a child took it
  divEl.focus();    
};
divEl.focus();

附：对于 IE11，可能需要一个小技巧 event.relatedTarget = event.relatedTarget || document.activeElement;。

Answer 7

el.onmouseleave = function(){
  document.body.onclick = function(){
    el.style.display = 'none';
    document.body.onclick = null;
  }
}

Answer 8

好的，这是一个基于 jQuery 的解决方案，它基于在 DOM 中单击的任何 div。

$('div').on('click', function(e){
    var parents = $(e.currentTarget).parents();
    for (var i = 0; i < parents.length; i++) {
        if (parents[i].id === 'divToHide' || e.currentTarget.id === 'divToHide') {
            // you are in the popup
        };
    }
    e.stopPropagation();
});

这会查看您当前的元素以及任何父元素，并检查 id 是否匹配。如果 divToHide 在 parents() 列表中，则保持弹出窗口打开。

*注意：这需要将您的内容包装在包装器 div 或类似的东西中。