在不移除EventListener的情况下，阻止listener在相同的单击EventListener中触发

Question

所以，我需要一个表单，以保持显示，当它被点击点击事件监听器的内部。其概念是，您通过单击按钮打开表单，然后表单出现(这是可行的)。表单关闭，如果你点击页面上的任何地方(这也有效)，但我需要它保持开放，如果你点击表单。目前，如果我单击表单，它就会消失。事件尝试" 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');
}
});

Answer 1

检查event.target是否是以表单为祖先的元素还是表单本身(使用closest):

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

Answer 2

只需在事件监听器的第一行添加if(event.target == searchForm) return。

下面的片段

let searchToggle = document.querySelector('.button');
let searchForm = document.querySelector('.form');
document.addEventListener('click', function(event) {
if (event.target == searchForm) return
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');
}
});

.form {
display: none;
border: 1px solid black;
}
.form.show-form {
display: block;
}

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

Answer 3

您需要创建一个表单覆盖，并附加一个点击事件侦听器到覆盖。

<div id="overlay" style="width="100vw; height:100vh; position:fixed; top:0px; left:0px" >
<form> </form>
</div>

并添加附加事件监听器到叠加。

<script>
window.addEventListener("click",event=>{
event.target.style.display = "none";
});
</script>