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