0

我试图使“表单”仅在单击具有以下条件的另一个“按钮”后才可见：

  • 只有单击“按钮”才能看到“表单”。
  • 如果您单击“外部”表单或再次单击按钮：表单将再次隐藏。

/* JAVASCRIPT */
const outer = document.getElementById('outer');
const inner = document.getElementById('inner')
outer.onclick = function() {
  if (inner.style.visibility == 'visible') {
    document.getElementById('inner').style.visibility = 'hidden';
  } else {
    document.getElementById('inner').style.visibility = 'visible';
  }
}
const ignoreClickOnMeElement = document.getElementById('inner');
document.addEventListener('click', function(event) {
  const isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
  if (!isClickInsideElement) {
    // when uncommenting the line below everything stop working, rather then just closing if I click outside this div
    /*    document.getElementById('inner').style.visibility='hidden';*/
  }
});
/* CSS */

* {
  border: thin solid black;
}
<!-- HTML -->

<body>
  <div class="outer" id="outer">
    <button>Visible</button>
  </div>
  <div class="inner" id="inner" style="visibility: hidden;">
    <form id="form">
      <input type="number">
      <input type="number">
    </form>
  </div>
</body>

4

1 回答 1

1

如果您使用delegated event listener到更高节点的绑定，例如在这种情况下的文档正文，您可以根据事件目标确定哪些元素已被单击。

let form=document.getElementById('form');
let bttn=document.querySelector('div.outer button');

document.body.addEventListener('click',e=>{

  e.preventDefault();
  e.stopPropagation();

  if( ( e.target==bttn && form.parentNode.style.visibility!=='visible' ) || e.target==form || e.target.parentNode==form ){
    form.parentNode.style.visibility='visible'
  }else{
    form.parentNode.style.visibility='hidden'
  }
  

})
* {
    border: thin solid black;
}
form{
  height:100px;width:80%;background:pink
}
.inner{
  height:200px;width:100%;
}
.outer{
  width:100%;height:100px;
}
<div class="outer" id="outer">
  <button>Visible</button>
</div>
<div class="inner" id="inner" style="visibility: hidden;">
  <form id="form">
    <input type="number">
    <input type="number">
  </form>
</div>

于 2021-01-16T15:31:05.217 回答