Javascript removeEventListener在显示模块结构时出现问题

我对这个问题感到非常沮丧。我编写了一个单击/拖动代码，当您单击某个DOM元素时，它会在鼠标移动时拖动指定的DOM元素，然后在鼠标向上移动时释放这些元素

我遇到的问题是，我试图删除鼠标上的事件侦听器，因此DOM元素在鼠标事件上停止移动。但似乎没有什么能消除这一事件

这是密码

var cls_MouseDrag = (function(){

    var obj_Element, obj_Drag, v_yPos, v_xPos = null;

    function Constructor(par_ElementId, par_ElementDrag){
        obj_Element = document.getElementById(par_ElementId);
        obj_Drag = document.getElementById(par_ElementDrag);
        obj_Element.addEventListener('mousedown', MouseDown, false);
    };

    function MouseDown(){
        var v_offset = obj_Element.getBoundingClientRect();
        v_xPos = event.clientX - v_offset.left;
        v_yPos = event.clientY - v_offset.top;
        document.addEventListener('mousemove', cls_MouseDrag.MouseMove);
    };

    function MouseUp(){
        document.removeEventListener('mousemove', cls_MouseDrag.MouseMove);
    };

    function MouseMove(){
        event.preventDefault();
        obj_Drag.style.top = event.clientY - v_yPos + 'px';
        obj_Drag.style.left = event.clientX - v_xPos + 'px';
    };

    return { 
        Constructor:Constructor,
        MouseMove:MouseMove
    };

})();

cls_MouseDrag.Constructor('file_drag','my_file');

更新代码

    var cls_MouseDrag = (function(){

    var v_ClickElement = null, v_DragElement = null, v_yPos = null, v_xPos = null;

    function Constructor(par_ClickElementId, par_DragElementId){
        document.getElementById(par_ClickElementId).addEventListener('mousedown', function () { MouseDown(par_ClickElementId, par_DragElementId) }, false);
    }

    function MouseDown(par_ClickElementId, par_DragElementId){

        v_ClickElement = document.getElementById(par_ClickElementId);
        v_DragElement = document.getElementById(par_DragElementId);

        var v_offset = v_ClickElement.getBoundingClientRect();
        v_xPos = event.clientX - v_offset.left;
        v_yPos = event.clientY - v_offset.top;

        document.addEventListener('mouseup', MouseUp, false);
        document.addEventListener('mousemove', MouseMove, false);
    }

    function MouseUp(){
        document.removeEventListener('mouseup', MouseUp, false);
        document.removeEventListener('mousemove', MouseMove, false);
        var v_ClickElement = null, v_DragElement = null, v_yPos = null, v_xPos = null;
    }


    function MouseMove(){
        event.preventDefault();
        v_DragElement.style.top = event.clientY - v_yPos + 'px';
        v_DragElement.style.left = event.clientX - v_xPos + 'px';
    }

    return { 
        Constructor:Constructor,
    };

})();

cls_MouseDrag.Constructor('file_drag','my_file');

---

})

在

构造函数中，此行之后：

obj_Element.addEventListener('mousedown', MouseDown, false);

你可能想要

obj_Element.addEventListener('mouseup', MouseUp, false);

…否则，我不知道如何调用
MouseUp


旁注：
cls\u MouseDrag.
这些行的一部分：

document.addEventListener('mousemove', cls_MouseDrag.MouseMove);

…是不必要的（但无害的）。相反：

document.addEventListener('mousemove', MouseMove);

旁注2：您可能还希望在是否使用第三个参数方面保持一致（一些较旧的浏览器仍然需要它，所以我会这样做）

旁注3：你没有把
；它是一个语句终止符，而声明不是语句。
要删除侦听器，必须有匹配的add-remove示例：

function handler() {}
document.addEventListener('mousedown', handler);//to add
document.removeEventListener('mousedown', handler);//to remove

结论传递给addEventListener的参数应与传递给removeEventListener的参数相同，否则将无法工作

希望有帮助

我后来看到您重新编辑了代码，但我现在认为您的代码没有问题。检查：（控制台）
您在哪里设置“mouseup”事件侦听器？啊，这很有效。愚蠢的错误。昨晚是一个漫长的夜晚，我很累。代码有点让人惊讶：你开始在一个元素中拖动鼠标向下，但是当鼠标移动时，你移动了另一个元素。在这种情况下（可能只是在general principal上），您可能希望在
文档
上设置
mouseup
处理程序，而不是未拖动的元素。鼠标向下移动用于容器中的。内部div位于容器div的顶部，其他内容位于容器内。顶部区域是您必须单击以拖动整个容器的位置。好主意。