when ever i move mouse on defined area a non related function is triggered.
here is a test code
<!DOCTYPE html>
<html>
<head>
<title>ng-mousemove Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="app" style="padding-left:30px;">
<div ng-controller="test">
<div style="height:200px;width:200px;background-color:red" ng-mousemove="test($event)">
<span ng-repeat="n in data">
{{test1(n)}}
</span>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('test', ['$scope', function($scope) {
$scope.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
$scope.test = function(event) {
console.log(event.clientX, event.clientY)
return false
};
$scope.test1 = function(n) {
console.log('test1 triggered')
return n + 1
};
}]);
</script>
</body>
</html>as you can check whenever mouse is moving on the div it should triggers test() but it also triggers test1()
imagine test1() is a big function which needs time to process, triggering it every time causes thread blocking. according to this code i think test1() should get triggered once and test() should get triggered on mouse move.
is there any way to stop calling test1() on mouse move?
For test1() not to be invoked even though it is being called within a div that invokes test() I believe that you should define an expecify function for when it should be called to test1().
In my example when your click on span the test1() will be invoked. Maybe it will help you.