0

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

};
4

2 回答 2

0

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

于 2015-02-04T17:31:24.357 回答
0

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

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

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

希望有帮助。

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

于 2015-02-04T20:59:07.410 回答