Question

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

};

Answer 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：你不要在函数声明的末尾放置;;它是一个语句终止符，声明不是语句。

Answer 2

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

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

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

希望有所帮助。

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

揭示模块结构中的removeEventListener问题

2 个答案: