AngularJS provides various mouse events to track events
raised by user interaction with the mouse like mousedown, mouseleave, mouseover
etc, in this post we shall see on how to handle the mouseleave event using AngularJS
AngularJS provides ng-mouseleave directive to handle mouse down events raised by the user, mouseleave event can be handled by associating the ng-mouseleave directive to an event handler function which passes the mouse event as a parameter.
The following example shows on how to use the ng-mouseleave directive to handle mouseleave events raised by the user.
<html ng-app="mouseLeaveApp">AngularJS provides ng-mouseleave directive to handle mouse down events raised by the user, mouseleave event can be handled by associating the ng-mouseleave directive to an event handler function which passes the mouse event as a parameter.
The following example shows on how to use the ng-mouseleave directive to handle mouseleave events raised by the user.
<head>
<meta charset="utf-8">
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('mouseLeaveApp', []);
function mouseLeaveController($scope) {
$scope.HandleEvent = function (mouseEvent) {
$scope.XPos = mouseEvent.pageX;
$scope.YPos = mouseEvent.pageY;
$scope.Event = mouseEvent.shiftKey;
};
};
</script>
</head>
<body>
<div ng-controller="mouseLeaveController">
<div style="width:100px; height:100px; border:1px solid #000000;" ng-mouseleave="HandleEvent($event)"></div><br/>
mouseLeave at Position : ({{XPos}}, {{YPos}}) <br/>
</div>
</div>
</body>
</html>
Output:
No comments:
Post a Comment