模块覆盖以前附加的窗口mouseup事件

Question

我目前正在开发一个javascript模块，该模块可以打开和关闭方框、工具提示或类似功能，该函数工作得很好。唯一的问题是，当我在一个"boxes"类不同的页面上调用它两次时，窗口mouseup事件将被覆盖，并且在打开方框后，只能关闭方框的两个模块实例中的一个。

var boxRevealer = (function () {
var buttons;
var boxes;
var element;
var drp_active = false;
var boxConstruct = function (btns, bxs) {
buttons = document.querySelectorAll(btns);
boxes = document.querySelectorAll(bxs);
boxEvents();
};
var boxEvents = function () {
buttons.forEach(function (e) {
e.addEventListener("click", function (ee) {
element = document.getElementById(e.getAttribute("data-drp"));
element.classList.toggle("displayn");
drp_active = true;
});
});
window.addEventListener("mouseup", function (e) {
if (drp_active === true) {
if (!e.target.classList.contains("filt_holy")) {
boxes.forEach(function (e) {
console.log("ELEMENT");
console.log(e);
e.classList.add("displayn");
});
}
}
}, false);
};
return {
boxConstruct: boxConstruct,
boxEvents: boxEvents
};
})();

以下是我如何将模块称为

window.addEventListener("load", function(e){
boxRevealer.boxConstruct(".head_drp_btn", ".head_drp"); 
boxRevealer.boxConstruct(".mkt_drp_btn", ".mkt_drp"); 
});

所以我的问题是，我应该总是给盒子起同样的名字，还是有工作要做？

Answer 1

只需在添加之前删除事件，我认为同一事件会被调用两次。

因此更新后的代码如下：

// Attach an event handler to <div>
e.addEventListener("mousemove", myFunction);
// Remove the event handler from <div>
e.removeEventListener("mousemove", myFunction);

并在添加之前删除窗口事件。