javascript - 每次页面刷新后事件监听器都会复合

Question

所以我使用本教程为一些图表构建了自定义右键菜单:https://www.sitepoint.com/building-custom-right-click-context-menu-javascript/

它工作得很好，但我对听众有一个问题。具体来说，当调用 contextListeners 和 clickListeners 函数时，在页面加载时添加事件监听器。但是，在我的应用程序中，我有一个按钮可以重新绘制这些图形并重新加载自定义右键单击菜单所附加的页面，并且每次都会创建新的监听器。因此，如果我加载两个不同的图表，与右键单击菜单关联的函数将被调用两次，如果我加载三次，则调用三次。这是不断被调用并不断添加监听器的函数

function contextListener() {
                        document.addEventListener("contextmenu", function(e) {
                            taskItemInContext = clickInsideElement(e, taskItemClassName);
                            if (taskItemInContext) {
                                e.preventDefault();
                                toggleMenuOn();
                                positionMenu(e);
                            } else {
                                taskItemInContext = null;
                                toggleMenuOff();
                            }
                        });
                    }

在后来的函数中我尝试过:

document.removeEventListener("contextmenu", function(e) {
                            console.log("removed");
                        });

但这似乎并不能解决问题。

Answer 1

我不太明白你的问题，但你可以试试这个:

function contextListener() {
                if(!document.handAddcontext){
                    document.handAddcontext = true
                    document.addEventListener("contextmenu", function(e) {
                        taskItemInContext = clickInsideElement(e, taskItemClassName);
                        if (taskItemInContext) {
                            e.preventDefault();
                            toggleMenuOn();
                            positionMenu(e);
                        } else {
                            taskItemInContext = null;
                            toggleMenuOff();
                        }
                    });
                }

                }