Question

我目前正在使用一个javascript模块来打开和关闭框，工具提示或类似内容，该函数的效果很好，唯一的问题是当我在“框”类不同的页面上两次调用它时，窗口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);

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

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

1 个答案: