Code


<!DOCTYPE html> <html> <head> <script src="angular.js"></script> <script src="script.js"></script> </head> <body ng-app="mainModule"> <div ng-controller="mainController"> <h3>1. Click</h3> <button id="firstBtn" ng-click="onFirstBtnClick()">Click me</button> <strong>RESULT:</strong> {{onFirstBtnClickResult}}<br /> <br /> <h3>2. Click with Dependency Injection</h3> <label>Type something: <input type="text" ng-model="secondBtnInput"></label> <button id="secondBtn" ng-click="onSecondBtnClick(secondBtnInput)">Click me</button><br /> <strong>RESULT:</strong> {{onSecondBtnClickResult}}<br /> <br /> <h3>3. Double click</h3> Double-click the square<br /> <img src="images/square.png" ng-dblclick="onDblClick()" /><br /> <strong>RESULT:</strong> {{onDblClickResult}}<br /> <h3>4. Mouse down, up, enter, leave, move, over</h3> Move the mouse on the square<br /> <img src="images/square.png" ng-mousedown="onMouseDown($event)" ng-mouseup="onMouseUp($event)" ng-mouseenter="onMouseEnter($event)" ng-mouseleave="onMouseLeave($event)" ng-mousemove="onMouseMove($event)" ng-mouseover="onMouseOver($event)" /><br /> <strong>MOUSE DOWN RESULT:</strong> {{onMouseDownResult}}<br /> <strong>MOUSE UP RESULT:</strong> {{onMouseUpResult}}<br /> <strong>MOUSE ENTER RESULT:</strong> {{onMouseEnterResult}}<br /> <strong>MOUSE LEAVE RESULT:</strong> {{onMouseLeaveResult}}<br /> <strong>MOUSE MOVE RESULT:</strong> {{onMouseMoveResult}}<br /> <strong>MOUSE OVER RESULT:</strong> {{onMouseOverResult}} </div> </body> </html>
angular.module("mainModule", []) .controller("mainController", function ($scope) { // Initialization $scope.onFirstBtnClickResult = ""; $scope.secondBtnInput = ""; $scope.onDblClickResult = ""; $scope.onMouseDownResult = ""; $scope.onMouseUpResult = ""; $scope.onMouseEnterResult = ""; $scope.onMouseLeaveResult = ""; $scope.onMouseMoveResult = ""; $scope.onMouseOverResult = ""; // Utility functions // Accepts a MouseEvent as input and returns the x and y // coordinates relative to the target element. var getCrossBrowserElementCoords = function (mouseEvent) { var result = { x: 0, y: 0 }; if (!mouseEvent) { mouseEvent = window.event; } if (mouseEvent.pageX || mouseEvent.pageY) { result.x = mouseEvent.pageX; result.y = mouseEvent.pageY; } else if (mouseEvent.clientX || mouseEvent.clientY) { result.x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; result.y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop; } if (mouseEvent.target) { var offEl = mouseEvent.target; var offX = 0; var offY = 0; if (typeof(offEl.offsetParent) != "undefined") { while (offEl) { offX += offEl.offsetLeft; offY += offEl.offsetTop; offEl = offEl.offsetParent; } } else { offX = offEl.x; offY = offEl.y; } result.x -= offX; result.y -= offY; } return result; }; var getMouseEventResult = function (mouseEvent, mouseEventDesc) { var coords = getCrossBrowserElementCoords(mouseEvent); return mouseEventDesc + " at (" + coords.x + ", " + coords.y + ")"; }; // Event handlers $scope.onFirstBtnClick = function () { $scope.onFirstBtnClickResult = "CLICKED"; }; $scope.onSecondBtnClick = function (value) { $scope.onSecondBtnClickResult = "you typed '" + value + "'"; }; $scope.onDblClick = function () { $scope.onDblClickResult = "DOUBLE-CLICKED"; }; $scope.onMouseDown = function ($event) { $scope.onMouseDownResult = getMouseEventResult($event, "Mouse down"); }; $scope.onMouseUp = function ($event) { $scope.onMouseUpResult = getMouseEventResult($event, "Mouse up"); }; $scope.onMouseEnter = function ($event) { $scope.onMouseEnterResult = getMouseEventResult($event, "Mouse enter"); }; $scope.onMouseLeave = function ($event) { $scope.onMouseLeaveResult = getMouseEventResult($event, "Mouse leave"); }; $scope.onMouseMove = function ($event) { $scope.onMouseMoveResult = getMouseEventResult($event, "Mouse move"); }; $scope.onMouseOver = function ($event) { $scope.onMouseOverResult = getMouseEventResult($event, "Mouse over"); }; });

Example


Description


AngularJS gives us a way to bind event handlers for mouse events with the ability to use Dependency Injection with the arguments of the handlers. Here are some directives useful for mouse events:

  • ng-click
  • ng-dblclick
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
The names of the directives make it easy to understand what they're used for, so let's take a look at the example.

Point 1 is straightforward. We just bind the onFirstBtnClick event handler to the click event of a button and when the user clicks it we set onFirstBtnClickResult to the value CLICKED.

Point 2 shows how we can use Dependency Injection. We have an input element bound to a secondBtnInput model variable and we pass its value to the onSecondBtnClick event handler through Dependency Injection by simply writing the name of the variable as a function parameter when we use the ng-click directive.

Point 3 is straightforward as well. Here we intercept the double-click event over an image through the ng-dblclick directive.

Point 4 shows the remaining mouse events. For each event we pass to the corresponding handler also the $event variable. This is simply the same MouseEvent variable that we would have from the browser while working with plain JavaScript. For each event handler we use a getCrossBrowserElementCoords function to decode the mouse coordinates within the image. That function is cross-browser and is illustrated here just to use plain JavaScript and avoid 3rd-party libraries. We could have used jQuery to make it simple.