ng-mouse events in AngularJS

How to perform mouse operations in AngularJS?

To perform mouse operations in AngularJS, we can use different mnouse directives available

ng-mousedown - executes when mouse is clicked on the element
ng-mouseenter - executes when mouse enters into the element area
ng-mouseleave - executes when mouse leaves the element area
ng-mousemove - executes when mouse is moved on the element area
ng-mouseover - executes when mouse is kept over the element
ng-mouseup - executes when mouse is left after clicking the element

In the script block, we have defined various functions/methods for respective mouse events explained above. Each event set its own $scope property with the event name and the current time this event executes.

<script>

    var app = angular.module("app", []);
    app.controller("MouseController", function ($scope) {

        $scope.MouseDown = function ($event) {
            $scope.MouseDownDescription = $event + " Mouse down called" + new Date().getTime();
        }

        $scope.MouseEnter = function ($event) {
            $scope.MouseEnterDescription = $event + " Mouse enter called" + new Date().getTime();
        }

        $scope.MouseLeave = function ($event) {
            $scope.MouseLeaveDescription = $event + " Mouse leave called" + new Date().getTime();
        }

        $scope.MouseMove = function ($event) {
            $scope.MouseMoveDescription = $event + " Mouse move called" + new Date().getTime();
        }

        $scope.MouseOver = function ($event) {
            $scope.MouseOverDescription = $event + " Mouse over called" + new Date().getTime();
        }

        $scope.MouseUp = function ($event) {
            $scope.MouseUpDescription = $event + " Mouse up called" + new Date().getTime();
        }
    });

</script>
<div ng-app="app" ng-controller="MouseController">
    Perform mouse activity on below area

    <div ng-mousedown="MouseDown($event)" ng-mouseenter="MouseEnter($event)"
         ng-mouseleave="MouseLeave($event)" ng-mousemove="MouseMove($event)"
         ng-mouseover="MouseOver($event)" ng-mouseup="MouseUp($event)"
         style="background-color:#ededed;padding:10px;">
        <img src="http://techfunda.com/Images/TechFunda.gif" alt="TechFunda.com logo">
    </div>

        <hr />
        <p>Mouse Down {{ MouseDownDescription }}</p>
        <p>Mouse Enter {{ MouseEnterDescription }}</p>
        <p>Mouse Leave {{ MouseLeaveDescription }}</p>
        <p>Mouse Move {{ MouseMoveDescription }}</p>
        <p>Mouse Over {{ MouseOverDescription }}</p>
        <p>Mouse Up {{ MouseUpDescription }}</p>
</div>

In the HTML block, we have a <div> element (containing TechFunda.com logo) with all the events explained above with their respective function to call when that particular event executes. Below that $scope property set for respective properties are written in the paragraph.

When mouse is moved / entered / left / clicked on the gray area, respective event executes and writes messages into the paragraph accordinlgy.

Output

mouse events in angularjs