如何使用javascript单击窗口删除元素

Question

我希望每次用户单击窗口的任何部分（设置 - 内容除外）时都关闭（设置 - 内容）。 但此代码不起作用： (document.querySelector('body').addEventListener('click', function(e){....}) 并发出错误信号。 我怎样才能正确地做到这一点？

var icon = document.getElementsByClassName("setting--icon");
var panel = document.getElementsByClassName('setting--content');
for (var i = 0; i < icon.length; i++) {
   icon[i].onclick = function(){
    var setClasses = !this.classList.contains('active');
        setClass(icon, 'active', 'remove');
        setClass(panel, 'active', 'remove');
        if (setClasses) {
         this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("active");
       }
   }
}

function setClass(els, className, fnName) {
 for (var i = 0; i < els.length; i++) {
   els[i].classList[fnName](className);
 }
}

document.querySelector('body').addEventListener('click', function(e){
   if (!(event.target == 'setting--content')) {                 panel.classList.remove('active');
    this.nextElementSibling.classList.remove("active");
  }
})

.setting--icon{
  border: 1px solid red;
  width:20px;
  height:20px;
}


.setting--content {
    position: fixed;
    left: 50%;
    top: -150%;
    width: 50%;
    height:20px;
    margin: 0 auto;
    text-align: center;
    transition: 0.3s;
    min-height: 300px;
    padding: 2rem;
    transform: translateX(-50%);
    border:1px solid green;
}

.setting--content.active {
    top: 20%;
}

<form >
  <div class="setting--icon">1</div> 
  <div class="setting--content">
    <input type="text" name="address" id="address" placeholder="search …">
  </div>
</form>

<div>
  <div class="setting--icon">2</div>
  <div class="setting--content"> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus explicabo repellendus quos illo eaque vitae, nostrum id accusantium. Cum est fugiat animi molestiae dicta praesentium repellat ipsa iusto dolore perspiciatis?     </p>
  </div>
</div>

Answer 1

要检查哪个元素被点击了，你可以在HTMLElement 上使用matches 方法，在你的body 点击处理程序中你可以这样使用它：

event.target.matches('.setting--content');

在您的 sn-p 中，您通过单击 .setting--icon 来切换 .setting--content，因此您应该检查目标不是 .setting--icon，如下所示：

event.target.matches('.setting--icon');

为了进行上述检查，您还应该检查单击的项目不在.setting--content 中，您可以通过将当前活动面板存储在变量中并使用contains 方法来检查单击的项目是否属于.setting--content。像这样：

var icon = document.getElementsByClassName("setting--icon");
var panel = document.getElementsByClassName('setting--content');
var activePanel = null;
for (var i = 0; i < icon.length; i++) {
  icon[i].onclick = function() {
    var setClasses = !this.classList.contains('active');
    setClass(icon, 'active', 'remove');
    setClass(panel, 'active', 'remove');
    if (setClasses) {
      this.classList.toggle("active");
      activePanel = this.nextElementSibling;
      activePanel.classList.toggle("active");
    }
  }
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i++) {
    els[i].classList[fnName](className);
  }
}

document.querySelector('body').addEventListener('click', function(event) {
  if (!event.target.matches('.setting--content') &&
    !event.target.matches('.setting--icon') &&
    activePanel && !activePanel.contains(event.target)) {
    setClass(panel, 'active', 'remove');
    setClass(icon, 'active', 'remove');
  }
})

body {
  min-height: 100vh;
}

.setting--icon {
  border: 1px solid red;
  width: 20px;
  height: 20px;
}

.setting--content {
  position: fixed;
  left: 50%;
  top: -200%;
  width: 50%;
  height: 20px;
  margin: 0 auto;
  text-align: center;
  transition: 0.3s;
  min-height: 300px;
  padding: 2rem;
  transform: translateX(-50%);
  border: 1px solid green;
}

.setting--content.active {
  top: 20%;
}

<form>
  <div class="setting--icon">1</div>
  <div class="setting--content">
    <input type="text" name="address" id="address" placeholder="search …">
  </div>
</form>

<div>
  <div class="setting--icon">2</div>
  <div class="setting--content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus explicabo repellendus quos illo eaque vitae, nostrum id accusantium. Cum est fugiat animi molestiae dicta praesentium repellat ipsa iusto dolore perspiciatis? </p>
  </div>
</div>

顺便说一句，由于您的.setting--content 具有fixed 显示，在下面的示例中，我添加了样式body{ min-height: 100vh; } 以防止body 崩溃。我还将.setting--content 上的top 属性从-150% 更改为-200%，以便在预览模式下正确运行sn-p。