1

I have made a directive, inside I am attempting to listen to the $document.mousemove event in order to reposition a div - for the purpose of making a number slider (i.e. slide numbers between 1-100).

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

The above mousedown event is fired and handled by the following function:

$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); };

The mouseup function does work and causes a console log, but the mousemove does not fire at all:

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

If it is relevant, my directive:

.directive('fmSlider', function($document) { return { restrict: 'E', scope: { fmMin: '=', fmMax: '=', fmDefault: '=' }, templateUrl: 'path-to-template/slider.html' }; });

I don't understand why the mouseup would work, but the mousemove would not. Thanks for the help.

Improve this question
2
  • Try using document.onmousemove instead, works for me Commented Feb 21, 2014 at 1:29
  • 2
    There is something else going on outside of the code you provided. Here is a fiddle showing your code works fine. The mousemove event is firing.If that doesn't help, replicate your issue in a fiddle or share some more code jsfiddle.net/G9jGa/17 Commented Feb 21, 2014 at 2:59

2 Answers 2

Reset to default
0

I don't know if this helps you but i encountered a similar problem with my code and my controller declaration looked first something like this

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

but when i changed it to 

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

then it worked. I am not quite sure why but hey at least something.

Thanks to the example by Charlie Martin

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You can add a Event Listener, like this:

var variable = document.getElementById("mousedown"); variable.addEventListener('mousedown', (event) => { alert('test')});
<div id="mousedown"> On Mouse Down </div>

Improve this answer

Comments