AngularJS ng-mousemove Event with Example

  Total Views : 2074
  Comments : 0
  Keywords : Angularjs ngmousemove directive with example, Angularjs mousemove event example, Angularjs use ng-mousemove event to raise custom functions,ng-mousemove directive example in angularjs

Here we will learn ng-mousemove event directive in angularjs, use of ng-mousemove event in angularjs and raise events while moving mouse curosr over html elements using ng-mousemove directive in angularjs.

AngularJS ng-mousemove Event Directive

In angularjs ng-mousemove event directive is used to execute or raise custom events / functions when mouse cursor moving on html elements.


The ng-mousemove event in angularjs will fire an events while moving mouse cursor over an element.


Suppose in angularjs application if you want to raise an event / function while moving mouse cursor over html elements then it’s better to use ng-mousemove event.

Syntax of AngularJS ng-mousemove Event

Following is the syntax of using angularjs ng-mousemove event directive in applications.


<element ng-mousemove="expression">

--Your Code--


In angularjs whenever mouse pointer or cursor moving on html elements then ng-mousemove event will fire and execute expression and ng-mousemove event will support all html elements.


The ng-mousemove event in angularjs will not override onmousemove event of html elements both will execute separately.

Example of AngularJS ng-mousemove Event

Following is the example to raise custom function whenever mouse moving over html element by using ng-mousemove event in angularjs application.


Live Preview

<!DOCTYPE html>




AngularJs ng-mousemove Event with Example


<script src=""></script>

<script type="text/javascript">

var app = angular.module('ngmousemoveApp', []);

app.controller('ngmousemoveCtrl', function ($scope) {

$scope.count = 0;

$scope.getdetails = function () {

$scope.count = $scope.count + 1;






<div ng-app="ngmousemoveApp" ng-controller="ngmousemoveCtrl">

<h2>AngularJS ng-mousemove Event Example</h2>

<div style="padding:10px; border:1px solid black; width:30%; cursor:pointer; font-weight:bold" ng-mousemove="getdetails()">Move Mouse Cursor Here...</div><br /><br />

<span style="color:Red">No. of Times MouseMove Event Fired: {{count}}</span>





If you observe above angularjs ng-mousemove event example we are calling function getdetails() in ng-mousemove event and showing number of times mousemove event fired while moving mouse cursor on div element.

Output of AngularJS ng-mousemove Event Example

Following is the result of using ng-mousemove event in angularjs applications.


Angularjs ng-mousemove event directive example output or result


This is how we can use ng-mousemove event in angularjs applications to raise events whenever mouse pointer / cursor moves over html elements.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User