Проблема с 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');

};


javascript addeventlistener javascript-events revealing-module-pattern
person Mike Reed    schedule 04.02.2015    source источник
comment
Где вы настраиваете прослушиватель событий mouseup?   -  person Pointy    schedule 04.02.2015

Ответы (2)


arrow_upward
0
arrow_downward

В 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: вы не ставите ; в конце объявлений функций; это признак конца оператора, а объявления не являются операторами.

person Community    schedule 04.02.2015
comment
Ах, это сработало. Глупая ошибка. Вчера была длинная ночь, и я устал. - person Mike Reed; 04.02.2015
comment
Код немного удивителен: вы начинаете перетаскивание мышью внутри одного элемента, но затем, когда мышь перемещается, вы перемещаете другой элемент. В этом случае (и, возможно, просто по общему принципу) вы, вероятно, захотите установить обработчик mouseup на document, а не на элемент, который вы не перетаскиваете. - person T.J. Crowder; 04.02.2015
comment
Нажатие мыши означает ‹div› внутри контейнера ‹div›. Внутренний элемент div расположен в верхней части элемента div-контейнера с другим содержимым внутри контейнера. В этой верхней области вам нужно щелкнуть, чтобы перетащить весь контейнер. Хотя идея хорошая. - person Mike Reed; 04.02.2015

arrow_upward
0
arrow_downward

Чтобы удалить слушателя, у вас должен быть соответствующий пример добавления и удаления:

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

Вывод: параметры, передаваемые в addEventListener, должны быть такими же, как и в removeEventListener, иначе это не сработает.

Надеюсь, это поможет.

Позже я увидел, что вы перередактировали, но теперь я не вижу проблем в вашем коде. Проверьте: http://jsfiddle.net/atrifan/8o1gxpyw/ (консоль)

person atrifan    schedule 04.02.2015