时间戳

首页 > 解决方案 > 停止侦听器在同一单击 EventListener 内触发而不将其删除

javascript - 停止侦听器在同一单击 EventListener 内触发而不将其删除

问题描述

所以，我需要一个表单在单击事件侦听器内部单击时保持显示。这个概念是，您通过单击按钮打开表单，然后出现表单（这有效）。如果您单击页面上的任意位置（这也有效），表单将关闭，但如果您单击表单，我需要它保持打开状态。目前，如果我点击表格，它就会消失。事件尝试“event.preventDefault()”

任何帮助，将不胜感激

HTML

<button class="button">Click me</button>
<div class="form">
  This is a form
</div>

CSS

.form {
  display: none;
}
.form.show-form {
  display: block;
}

JS

let searchToggle = document.querySelector('.button');
let searchForm = document.querySelector('.form');

document.addEventListener('click', function(event) {
  let toggled = searchToggle.contains(event.target);
  if (toggled) {
    searchForm.classList.add('show-form');
    if (event.searchForm === toggled) {
      return false;
    }
  } else {
    searchForm.classList.remove('show-form');
  }
});

更新 #1：@trincot 的解决方案

let searchToggle = document.querySelector('.button');
let searchForm = document.querySelector('.form');

document.addEventListener('click', function(event) {
  let toggled = searchToggle.contains(event.target);
  if (toggled) {
    searchForm.classList.add('show-form');
  } else if (!event.target.closest('.show-form')) {
    searchForm.classList.remove('show-form');
  }
});

标签： javascript

解决方案

检查是否event.target是以表单为祖先的元素还是表单本身（使用closest）：

  } else if (!event.target.closest(".show-form")) {
    searchForm.classList.remove('show-form');
  }

推荐阅读