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