Sunday, April 26, 2015

ng-mousemove event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mousemove, mouseover etc, in this post we shall see on how to handle the mousemove event using AngularJS

AngularJS provides ng-mousemove directive to handle mouse down events raised by the user, mousemove event can be handled by associating the ng-mousemove directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-mousemove directive to handle mousemove events raised by the user.
<html ng-app="mouseMoveApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
    <script>
var app = angular.module('mouseMoveApp', []);

function mouseMoveController($scope) {
           $scope.HandleEvent = function (mouseEvent) {
                $scope.XPos = mouseEvent.pageX;
                $scope.YPos = mouseEvent.pageY;
                $scope.Event = mouseEvent.shiftKey;
              };
};
</script>
</head>
<body>
          <div ng-controller="mouseMoveController">
                   <div style="width:100px; height:100px; border:1px solid #000000;" ng-mousemove="HandleEvent($event)"></div><br/>
                   mouseMove at Position : ({{XPos}}, {{YPos}}) <br/>
                   </div>
          </div>
</body>
</html>

Output:



Search Flipkart Products:
Flipkart.com

No comments: