移除.EventListener()正在更改程序的工作方式

Question

我正在尝试创建一个div，当我点击一个div时会出现，然后当我点击它时会消失，我使用了EventListener((来完成它，并且在没有removeEventLister((的情况下progmam工作得很好，但我需要删除EventListener。

当我使用removeEventListener((时，event.target会更改

关于代码：[object HTMLBodyElement]

关闭代码：〔对象HTMLDivElement〕

这是我的代码：

HTML:

<div class="account-settings gear m-r-120">
<!-- ACCOUNT SETTINGS -->
<span class="gear" onclick="settings()">
<i class="fas fa-cog fa-2x gear"></i>
<i class="fas fa-chevron-down gear m-t-7 p-l-5"></i>
</span>
</div>
<!-- ACCOUNT SETTINGS -->
<div class="settings-box trigger" id="settings-box" style="display: none">
<!-- SETTINGS BOX -->
<div class="change-box trigger">
<a href="#" class="trigger"> Change Name </a>
</div>
<div class="change-box trigger">
<a href="#" class="trigger"> Change Password </a>
</div>
<div class="change-box trigger">
<a href="#" class="trigger"> Change Email </a>
</div>
</div>
<!-- SETTINGS BOX -->

JS:

function settings() {
var box = document.getElementById("settings-box");
if (box.style.display === "none") {
document.addEventListener("click", setBox);
function setBox() {
let elements = document.getElementsByClassName("trigger");
let gear = document.getElementsByClassName("gear");
var click = false;
for (let i = 0; i < elements.length; i++) {
if (elements[i] === event.target) {
click = true;
}
}
if (!click) {
for (let j = 0; j < elements.length; j++) {
if (gear[j] === event.target) {
click = true;
}
}
}
if (click === false) {
box.style.display = "none";
this.removeEventListener("click", setBox);
} else {
box.style.display = "block";
}
}
} else {
box.style.display = "none";
}
}

提前感谢

Answer 1

UPDATE-点击div外部以在纯JavaScript中隐藏div-关于相同问题的问题，请查看。

看起来你用错了removeEventListener()。只有在不再需要触发div可见性时，才需要删除侦听器。您可以简化逻辑，只需在单击.gear跨度时更改#settings-box的显示，而不需要任何addEventListener，因为您使用onclick处理程序。要显示\隐藏div，我建议使用数据属性-docs

应该是这样的：

HTML

<div class="account-settings gear m-r-120">
<span class="gear" onclick="settings()">
<i class="fas fa-cog fa-2x gear"></i>
<i class="fas fa-chevron-down gear m-t-7 p-l-5"></i>
</span>
</div>
<!-- Add data attribute here!! --!>
<div 
data-hidden="true"
class="settings-box trigger"
id="settings-box"
style="display: none;"
>  
<div class="change-box trigger">
<a href="#" class="trigger">
Change Name
</a>
</div>
<div class="change-box trigger">
<a href="#" class="trigger">
Change Password
</a>
</div>
<div class="change-box trigger">
<a href="#" class="trigger">
Change Email
</a>
</div>
</div>

如您所见，我添加了一个数据隐藏属性，我们将使用它来跟踪div的可见性。

JS:

function settings(){
var box = document.getElementById("settings-box");
// Gets hidden attribute.
var isHIdden = box.dataset.hidden;
if (!isHidden) {
// if hidden attribute is missing then
// we hide div and add hidden attribute.
box.style.display = "none";
box.dataset.hidden = "true";
} else {
// If hidden attribute is set then we show div
// and remove hidden attribute.
box.style.display = "block";
box.removeAttribute("hidden");
}
}

让我知道它是否适合你。