AngularJS ng-mousedown Event with Example

Here we will learn what is ng-mousedown event directive in angularjs and how to use ng-mousedown event to call or execute expressions / functions on mouse click with example.

AngularJS ng-mousedown Event Directive

In angularjs ng-mousedown event directive is used to raise or call events / custom functions on mouse click. 

 

The ng-mousedown event in angularjs will fire on mouse click and execute custom events / functions based on our requirements. 

 

Suppose in angularjs application if you want to raise an event on mouse click or call some custom functions immediately on mouse click it’s better to use ng-mousedown event.

Syntax of AngularJS ng-mousedown Event

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

 

<element ng-mousedown="expression">

--Your Code--

</element>

In angularjs whenever mouse click occurs ng-mousedown event will fire and execute expression and it will support all html elements.

 

The angularjs ng-mousedown event will not override onmousedown event of html elements both will execute separately.

Example of AngularJS ng-mousedown Event

Following is the example of getting number of times mouse click event fired by using ng-mousedown event in angularjs application.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-mousedown Event with Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

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

$scope.count = 0;

$scope.getdetails = function () {

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

}

});

</script>

</head>

<body>

<div ng-app="ngmousedownApp" ng-controller="ngmousedownCtrl">

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

<input type="button" ng-mousedown="getdetails()" value="Click Here"><br /><br />

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

</div>

</body>

</html>

If you observe above angularjs ng-mousedown event example we are calling function getdetails() and showing number of times mousedown event fired in application.

Output of AngularJS ng-mousedown Event Example

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

 

Angularjs ng-mousedown event example result or output

 

This is how we can use ng-mousedown event in angularjs applications to raise events on mouse click.