使用Vanilla JS在div或其开始按钮外单击时关闭元素

Question

我有两个按钮，其中一个打开一个表单，另一个为下拉菜单.

我想在点击外部时关闭两个元素，下拉菜单是ok因为我想让它在用户点击打开按钮之外的时候关闭。

但是第二个不工作，我希望当这个逻辑公式为真时它关闭:

• (打开按钮' fullsetbutton '未被点击))或(表单'dateForm'没有被点击)

因此，我用if语句中的公式为整个HTML创建了一个事件侦听器:

html.addEventListener("click", function(e){
if(e.target !== (dateForm || fulfillSetButton)){
dateForm.classList.remove("active");
}
});

但是它不起作用，你知道什么是错的吗?

// All the elements
const dropdownButton = document.querySelector("#dropdownToggle"),
fulfillSetButton = document.querySelector("#fulfillSetButton"),
dropdownMenu = document.querySelector('.dropdown-menu'),
html = document.querySelector("html"),
dateForm = document.querySelector(".completion-date");

// Preventing default action of submiting the form
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
// Closing the dropdown *working*
dropdownButton.addEventListener("click", function () {
dropdownMenu.classList.toggle("show");
});
html.addEventListener("click", function(e){
if(e.target !== dropdownButton){
dropdownMenu.classList.remove("show");
}
});
// Opening the date form
fulfillSetButton.addEventListener("click", function() {
dateForm.classList.add("active");
});
// Closing the date form by submiting
dateForm.lastElementChild.addEventListener(
"click", function () {
preventDefault();
dateForm.classList.remove("active");
}
);
// Closing the date form by clicking outside *not working*
html.addEventListener("click", function(e){
if(e.target !== (dateForm || fulfillSetButton)){
dateForm.classList.remove("active");
}
});

:root {
--trans-left:#84fab0;
--trans-right:#8fd3f4;
--background: #fff;
--color: #222;
}
.button-list {
align-self: center;
}
.completion-date {
display: block;
z-index: 10;
position: fixed;
top: -100%;
left: calc(50% - 121px);
min-width: max-content;
padding: 1rem;
border-radius: 0.5rem;
background: var(--background);
text-align: center;
box-shadow: 0 0 18px -6px var(--color);
transition: 0.3s;
}
.completion-date.active {
top: calc(50% - 264px);
}
.completion-date div {
margin: 0.5rem;
}
.completion-date input,
.completion-date button {
margin: auto 0;
}
.completion-date input {
width: 2rem;
text-align: center;
}
.completion-date div > button {
width: 1.5rem;
margin: auto 3px;
box-shadow: none;
font-weight: bold;
}
section {
width: 100vw;
}
input {
box-shadow: inset 0 3px 7px -3px black;
border: none;
line-height: 2rem;
}
button {
padding: 9px;
border: none;
box-shadow: 7px 7px 9px -10px var(--color), inset 0 0 15px -12px var(--color);
border-radius: 6px;
}
.entry {
display: flex;
align-items: flex-end;
height: 30vh;
background-image: linear-gradient(120deg, var(--trans-left) 0%, var(--trans-right) 100%);
}
@media screen and (max-height: 660px) {
.entry {
height: 38vh;
}
}
form {
display: flex;
flex-wrap: wrap;
max-width: 36rem;
justify-content: center;
margin: 0 auto;
}
form > * {
max-height: 100%;
}
form > div {
display: flex;
}
form > input {
margin: 0.5rem;
box-shadow: inset 0px 3px 9px -4px #000000;
border-radius: 6px;
}
.second-item {
flex-wrap: wrap;
justify-content: center;
}
.second-item > * {
margin: 0.5rem;
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}

.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.btn.dropdown {
transition: 0.3s ease;
}
.btn.dropdown.low {
background-color: #84fab0;
}
.btn.dropdown.high {
background-color: #ffa0a0;
}
.dropdown-menu {
z-index: 2;
position: absolute;
margin-top: 9px;
list-style: none;
padding-inline-start: 0;
margin-block-end: 0;
background: #fff;
box-shadow: 1px 1px 20px -9px black;
border-radius: 9px;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
}
.dropdown-menu > li {
padding: 0.4rem;
cursor: pointer;
}
.dropdown-menu.show {
pointer-events: all;
opacity: 1;
}

<section class="entry">
<form autocomplete="off">
<input type="text" id="taskText">
<div class="second-item">
<button type="button" id="fulfillSetButton">Date form</button>
<div class="dropdown-wrap">
<button class="btn dropdown" type="button" id="dropdownToggle">Dropdown button</button>
<ul class="dropdown-menu" id="taskPriority" style="background: linear-gradient(0deg, rgba(132,250,176,1) 0%, rgba(132,250,176,1) 33%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 66%, rgba(255,160,160,1) 66%, rgba(255,160,160,1) 100%); color: #000">
<li>Vysoká</li>
<li>Střední</li>
<li>Nízká</li>
</ul>
</div>
<button type="submit">submit</button>
</div>
</form>
<form class="completion-date">
<h2>Dokončit za:</h2>
<div>
<button onclick="increaseValue(months)">+</button>
<input id="months" type="number" value="0" min="0" max="12">
<button onclick="decreaseValue(months)">-</button>
<p>měsíců</p>
</div>
<div>
<button onclick="increaseValue(weeks)">+</button>
<input id="weeks" type="number" value="0" min="0" max="5">
<button onclick="decreaseValue(weeks)">-</button>
<p>týdnů</p>
</div>
<div>
<button onclick="increaseValue(days)">+</button>
<input id="days" type="number" value="0" min="0" max="31">
<button onclick="decreaseValue(days)">-</button>
<p>dní</p>
</div>
<div>
<button onclick="increaseValue(hours)">+</button>
<input id="hours" type="number" value="0" min="0" max="23">
<button onclick="decreaseValue(hours)">-</button>
<p>hodin</p>
</div>
<div>
<button onclick="increaseValue(minutes)">+</button>
<input id="minutes" type="number" value="0" min="0" max="59">
<button onclick="decreaseValue(minutes)">-</button>
<p>minut</p>
</div>
<button>Nastavit</button>
</form>
</section>

Answer 1

试试这个:

window.addEventListener('click', function(e){
if( div.contains(e.target)){
//click inside of element  
} else{
//click outside of element
}
});

我修复了一些CSS和HTML。

// All the elements
const dropdownButton = document.querySelector("#dropdownToggle"),
fulfillSetButton = document.querySelector("#fulfillSetButton"),
dropdownMenu = document.querySelector('.dropdown-menu'),
html = document.querySelector("body"),
dateForm = document.querySelector("#completion-date-id");

// Preventing default action of submiting the form
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
// Closing the dropdown *working*
dropdownButton.addEventListener("click", function () {
dropdownMenu.classList.toggle("show");
});
//new way works every spot on page
window.addEventListener('click', function(e){
if( dropdownButton.contains(e.target)){
} else{
dropdownMenu.classList.remove("show");
}
});
//Old way
//html.addEventListener("click", function(e){
//  if(e.target !== dropdownButton){
//    dropdownMenu.classList.remove("show");
//  }
//});
// Opening the date form
fulfillSetButton.addEventListener("click", function() {
dateForm.classList.add("active");
});
// Closing the date form by submiting
dateForm.lastElementChild.addEventListener(
"click", function () {
preventDefault();
dateForm.classList.remove("active");
}
);
// Closing the date form by clicking outside *working now*
window.addEventListener('click', function(e){

if( dateForm.contains(e.target) || fulfillSetButton.contains(e.target)){
} else{
dateForm.classList.remove("active");
}
});
// Closing the date form by clicking outside *not working*
//html.addEventListener("click", function(e){
//  if(e.target !== (dateForm || fulfillSetButton)){
//    dateForm.classList.remove("active");
//  }
//});

:root {
--trans-left:#84fab0;
--trans-right:#8fd3f4;
--background: #fff;
--color: #222;
}
.button-list {
align-self: center;
}
.completion-date {
z-index: 10;
position: fixed;
top: -100%;
left: calc(50% - 121px);
min-width: max-content;
padding: 1rem;
border-radius: 0.5rem;
background: var(--background);
text-align: center;
box-shadow: 0 0 18px -6px var(--color);
transition: 0.3s;
}
.completion-date.active {
top: calc(50% - 264px);
}
.completion-date div {
margin: 0.5rem;
}
.completion-date input,
.completion-date button {
margin: auto 0;
}
.completion-date input {
width: 2rem;
text-align: center;
}
.completion-date div > button {
width: 1.5rem;
margin: auto 3px;
box-shadow: none;
font-weight: bold;
}
section {
width: 100vw;
}
input {
box-shadow: inset 0 3px 7px -3px black;
border: none;
line-height: 2rem;
}
button {
padding: 9px;
border: none;
box-shadow: 7px 7px 9px -10px var(--color), inset 0 0 15px -12px var(--color);
border-radius: 6px;
}
.entry {
display: flex;
align-items: flex-end;
height: 30vh;
background-image: linear-gradient(120deg, var(--trans-left) 0%, var(--trans-right) 100%);
}
@media screen and (max-height: 660px) {
.entry {
height: 38vh;
}
}
form {
display: flex;
flex-wrap: wrap;
max-width: 36rem;
justify-content: center;
margin: 0 auto;
}
form > * {
max-height: 100%;
}
form > div {
display: flex;
}
form > input {
margin: 0.5rem;
box-shadow: inset 0px 3px 9px -4px #000000;
border-radius: 6px;
}
.second-item {
flex-wrap: wrap;
justify-content: center;
}
.second-item > * {
margin: 0.5rem;
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}

.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.btn.dropdown {
transition: 0.3s ease;
}
.btn.dropdown.low {
background-color: #84fab0;
}
.btn.dropdown.high {
background-color: #ffa0a0;
}
.dropdown-menu {
z-index: 2;
position: absolute;
margin-top: 9px;
list-style: none;
padding-inline-start: 0;
margin-block-end: 0;
background: #fff;
box-shadow: 1px 1px 20px -9px black;
border-radius: 9px;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
}
.dropdown-menu > li {
padding: 0.4rem;
cursor: pointer;
}
.dropdown-menu.show {
pointer-events: all;
opacity: 1;
}
.active{
display: block;
}

<body>
<section class="entry">
<form autocomplete="off">
<input type="text" id="taskText">
<div class="second-item">
<button type="button" id="fulfillSetButton">Date form</button>
<div class="dropdown-wrap">
<button class="btn dropdown" type="button" id="dropdownToggle">Dropdown button</button>
<ul class="dropdown-menu" id="taskPriority" style="background: linear-gradient(0deg, rgba(132,250,176,1) 0%, rgba(132,250,176,1) 33%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 66%, rgba(255,160,160,1) 66%, rgba(255,160,160,1) 100%); color: #000">
<li>Vysoká</li>
<li>Střední</li>
<li>Nízká</li>
</ul>
</div>
<button type="submit">submit</button>
</div>
</form>
<form id="completion-date-id" class="completion-date active">
<h2>Dokončit za:</h2>
<div>
<button onclick="increaseValue(months)">+</button>
<input id="months" type="number" value="0" min="0" max="12">
<button onclick="decreaseValue(months)">-</button>
<p>měsíců</p>
</div>
<div>
<button onclick="increaseValue(weeks)">+</button>
<input id="weeks" type="number" value="0" min="0" max="5">
<button onclick="decreaseValue(weeks)">-</button>
<p>týdnů</p>
</div>
<div>
<button onclick="increaseValue(days)">+</button>
<input id="days" type="number" value="0" min="0" max="31">
<button onclick="decreaseValue(days)">-</button>
<p>dní</p>
</div>
<div>
<button onclick="increaseValue(hours)">+</button>
<input id="hours" type="number" value="0" min="0" max="23">
<button onclick="decreaseValue(hours)">-</button>
<p>hodin</p>
</div>
<div>
<button onclick="increaseValue(minutes)">+</button>
<input id="minutes" type="number" value="0" min="0" max="59">
<button onclick="decreaseValue(minutes)">-</button>
<p>minut</p>
</div>
<button>Nastavit</button>
</form>
</section>
</body>