时间戳

首页 > 解决方案 > 模块覆盖先前附加的窗口 mouseup 事件

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

问题描述

我目前正在开发一个 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"); 
});

所以我的问题是，我应该总是将这些盒子命名为相同的名称，还是有解决方法？

标签： javascript

解决方案

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

所以更新后的代码如下：

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

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

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

推荐阅读