角鼠标移动事件答案

【问题标题】：Angular mousemove event角鼠标移动事件
【发布时间】：2014-02-21 01:02:32
【问题描述】：

我做了一个指令，在里面我试图监听 $document.mousemove 事件以重新定位一个 div - 目的是制作一个数字滑块（即 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 不会。感谢您的帮助。

【问题讨论】：

尝试改用document.onmousemove，对我有用
在您提供的代码之外还有其他事情发生。这是一个小提琴，显示您的代码工作正常。 mousemove 事件正在触发。如果这没有帮助，请在小提琴中复制您的问题或分享更多代码jsfiddle.net/G9jGa/17

标签： javascript angularjs

【解决方案1】：

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

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

但是当我把它改成

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

然后它起作用了。我不太清楚为什么，但至少是这样。

感谢 Charlie Martin 的示例

【讨论】：