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

【问题标题】：Trouble with removeEventListener in revealing module structureremoveEventListener 在显示模块结构时出现问题
【发布时间】：2015-02-04 17:24:59
【问题描述】：

我对遇到的这个问题感到非常沮丧。我整理了一个点击/拖动代码，当你点击某个 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');

};

【问题讨论】：

你在哪里设置“mouseup”事件监听器？

标签： javascript dom-events addeventlistener revealing-module-pattern

【解决方案1】：

在Constructor，在这行之后：

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

你可能想要

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

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

旁注：这些行的cls_MouseDrag. 部分：

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

...是不必要的（但无害的）。而是：

document.addEventListener('mousemove', MouseMove);

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

旁注 3：不要将 ; 放在函数声明的末尾；它是一个语句终止符，而声明不是语句。

【讨论】：

啊，成功了。愚蠢的错误。昨晚是一个漫长的夜晚，我很累。
代码有点出人意料：您开始在一个元素内的 mousedown 上拖动，但是当鼠标移动时，您正在移动一个 不同的 元素。在这种情况下（可能只是在一般原则上），您可能希望在 document 上设置 mouseup 处理程序，而不是您没有拖动的元素。
鼠标向下用于容器
中的
。内部 div 位于容器 div 的顶部，容器内有其他内容。该顶部区域是您必须单击以拖动整个容器的位置。好主意。

【解决方案2】：

要删除监听器，您必须有匹配的添加删除示例：

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

结论传递给 addEventListener 的参数应该与传递给 removeEventListener 的参数相同 - 否则它将不起作用。

希望对您有所帮助。

我后来看到你重新编辑了，但我现在发现你的代码没有问题。检查：http://jsfiddle.net/atrifan/8o1gxpyw/（控制台）

【讨论】：