Differentiate between click and hold & click - angularjs

Question

I have an html element that can get drag and dropped & also it can be clicked to do another action, I want to differentiate between these two actions so I thought I'd use ng-mousedown & ng-mouseup and count the time difference between them and based on that I'd be able to tell if that was a click or a click and hold (aka drag & drop).
So the element would look something like this:
<a ng-mousedown="mouseDownStudent()" ng-mouseup="mouseUpStudent()"> {{student.name}} </a>
And what I want to do is something along the lines of:
var isMouseDown = false;
var clickAndHoldTime = 0;
$scope.mouseDownStudent = function(){
isMouseDown = true;
while(isMouseDown){
clickAndHoldTime++;
}
}
$scope.mouseUpStudent = function(){
isMouseDown = false;
// If clickAndHoldTime > 100 ... it's a click
}
Of course this won't work and the while loop won't stop, I thought about using $interval but not sure how it would fit in that scenario.

Answer 1

You are very close in your implementation. What you want to do is capture the current time on mousedown and then on mouseup, find the elapsed time. You can do this by capturing the current Date and then finding the difference once you mouseup.
let startTime = 0;
$scope.mouseDownStudent = function() {
// Capture current time
startTime = new Date();
}
$scope.mouseUpStudent = function() {
// Get current time
let currentTime = new Date();
// Get elapsed time in ms
let elapsedTime = currentTime - startTime;
if (elapsedTime > 100) { ... }
}