javascript - JQuery + AngularJS : mousedown event is being called multiple times

Question

我有一个 Angular 的单页应用程序。

我无法使用 jQuery 可拖动方法，所以我自己编写了一个 -

 // here I am setting the drag event to a div
var enableDrag = function(id){
        $('#'+id).on('mousedown',handleMousedown);
}

var handleMousedown =function (e){
    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).offset();
    var isDragAction=false;
    function handle_dragging(e){
        isDragAction=true;
        var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
        var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
        $(my_dragging.elem)
            .offset({top: top, left: left});
    }
    function handle_mouseup(e){
        $('body')
            .off('mousemove', handle_dragging)
            .off('mouseup', handle_mouseup);
        if(isDragAction){
            console.log("drag was done!!");
        }
        else{
            console.log("click was done!!");
        }

    }
    $('body')
        .on('mouseup', handle_mouseup)
        .on('mousemove', handle_dragging);
}

在我的方法中，我这样调用它:

   //set off the last mousedwon to the div
   $("someDiv").off('mousedown',handleMousedown);
   //set the mousedwon to the div
   enableDrag("someDiv");

由于我的 Angular 应用程序的工作方式，我需要在每次调用该方法时调用它，而不是只调用一次。

拖动效果很好。

问题是每次调用该方法时，除了之前的事件之外，还会添加一个新事件。

含义:

正在调用第一个方法 - 拖动将打印到控制台:

"drag was done!!"

通过一次拖动调用第二个方法:

"drag was done!!"
"drag was done!!"

通过一次拖动及时调用方法:

"drag was done!!"
"drag was done!!"
.
.
.
"drag was done!!"

是什么累积了事件或导致多次打印？

Answer 1

尝试通过在设置事件之前将其删除来确保事件仅设置一次，而不是单独进行。不确定这是否是问题所在，因为我尚未在您的示例中测试过它。

var enableDrag = function(id) {
  $('#'+id).off('mousedown').on('mousedown', handleMousedown);
}