javascript - Angular 鼠标移动事件

Question

我已经制定了一个指令，在内部我尝试监听 $document.mousemove 事件以重新定位 div - 目的是制作数字 slider (即 1-100 之间的幻灯片编号)。

<div ng-mousedown="handleDown($event)"></div>

上面的 mousedown 事件由以下函数触发和处理:

$scope.handleDown = function(event) {
    console.log("MOUSE DOWN");
    event.preventDefault();
    startX = event.pageX - x;
    startY = event.pageY - y;
    $document.on('mousemove', mousemove);
    $document.on('mouseup', mouseup);
};

mouseup 函数确实起作用并导致控制台日志，但 mousemove 根本不触发:

function mousemove(event) {
    console.log("MOUSE MOVE");
}

function mouseup() {
    console.log("MOUSE UP");
    $document.unbind('mousemove', mousemove);
    $document.unbind('mouseup', mouseup);
}

如果相关，我的指令:

.directive('fmSlider', function($document) {

    return {
        restrict: 'E',
        scope: {
            fmMin: '=',
            fmMax: '=',
            fmDefault: '='
        },
        templateUrl: 'path-to-template/slider.html'
    };

});

我不明白为什么 mouseup 可以工作，但 mousemove 却不行。感谢您的帮助。

Answer 1

我不知道这是否对您有帮助，但我的代码遇到了类似的问题，并且我的 Controller 声明首先看起来像这样

app.controller('ToolBoxCtrl', function ($scope)

但是当我将其更改为

app.controller('ToolBoxCtrl', function ($scope,$document)

然后就成功了。我不太清楚为什么，但至少有一些东西。

感谢查理·马丁的例子