在不使用窗口和文档对象的情况下在外部单击时隐藏div

Question

当我使用<div>单击onblur时如何隐藏它？我尝试使用下面的代码，但是当我单击复选框时，它消失了；当我单击它之外时，它也不会消失。

然后我尝试使用有效的window或document对象，但当前使用的平台不支持该对象。我正在使用Lightning平台

使用JavaScript和/或CSS是否可以做到这一点？

var expanded = false;

function showshow() {
  var show = document.getElementById("show");

  if (!expanded) {
    show.style.display = "block";
    expanded = true;
  } else {
    show.style.display = "none";
    expanded = false;
  }
}

function hideshow() {
  var show = document.getElementById("show");

  if (expanded) {
    show.style.display = "none";
    expanded = false;
  }
}

#show {
  position: absolute;
  width: 200px;
  display: none;
  border: 1px solid #000000;
  background-color: #ffffff;
}

#show label {
  display: block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#show label:hover {
  background-color: #eff1f4;
}

<form id="input-form">
  <button type="button" onclick="showshow()">Select an option</button>

  <div id="show" tabindex="1" onblur="hideshow()">
    <label for="OptionA">
<input type="checkbox" id="OptionA" value="Option A" />Option A</label>
    <label for="OptionB">
<input type="checkbox" id="OptionB" value="Option B" />Option B</label>
    <label for="OptionC">
<input type="checkbox" id="OptionC" value="Option C" />Option ABCDEFGHIJKLMNOPQRSTUVWXYZ</label>
  </div>
</form>

Answer 1

document.getElementsByTagName("body")[0].addEventListener("click", function(){
  if(event.target.parent.id !== "idOfYourDiv") {
    // call hideshow() function
  }
});

Answer 2

$(document).click(function(event) {

  //if you click on anything except the modal itself or the "open modal" link, close the modal
  
  if (!$(event.target).closest(".modal,.js-open-modal").length) {
  
    $("body").find(".modal").removeClass("visible");
    
  }
});

Answer 3

展开时使show集中，以隐藏onblur后缀：

var expanded = false;

function showshow() {
  var show = document.getElementById("show");

  if (!expanded) {
    show.style.display = "block";
    show.focus(); // make show focused
    expanded = true;
  } else {
    show.style.display = "none";
    expanded = false;
  }
}

function hideshow() {
  var show = document.getElementById("show");

  if (expanded) {
    setTimeout(() => {
      show.style.display = "none";
      expanded = false;
    }, 100);
  }
}

#show {
  position: absolute;
  width: 200px;
  display: none;
  border: 1px solid #000000;
  background-color: #ffffff;
}

#show label {
  display: block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#show label:hover {
  background-color: #eff1f4;
}

<form id="input-form">
  <button type="button" onclick="showshow()">Select an option</button>

  <div id="show" tabindex="1" onblur="hideshow()">
    <label for="OptionA">
    <input type="checkbox" id="OptionA" value="Option A" />Option A</label>
    <label for="OptionB">
    <input type="checkbox" id="OptionB" value="Option B" />Option B</label>
    <label for="OptionC">
    <input type="checkbox" id="OptionC" value="Option C" />Option ABCDEFGHIJKLMNOPQRSTUVWXYZ</label>
  </div>
</form>