AngularJS ng-mousedown Directive
Last Updated :
08 Aug, 2022
Improve
The ng-mousedown Directive in AngularJS is used to apply custom behavior when mousedown event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed down. It is supported by all HTML elements.
Syntax:
<element ng-mousedown="expression">
Contents...
</element>
Parameter:
- expression: When the mouse button is clicked then the expression will be executed.
Example 1: This example uses ng-mousedown Directive to set the style of an element after clicking the mouse.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<title>ng-mousedown Directive</title>
</head>
<body ng-app style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mousedown Directive</h2>
<div>
<p ng-mousedown="geek={'color':'green',
'font-size':'larger'}"
ng-mouseup="geek={'font-size':''}"
ng-style="geek"
ng-class="'button'">
Hold mouse click to see effect.
</p>
</div>
</body>
</html>
Output:
Example 2: This example uses the ng-mousedown Directive to display an alert message after clicking the input area.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<title>ng-mousedown Directive</title>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mousedown Directive</h2>
<div ng-controller="app">
Input:
<input type="text"
ng-mousedown="alert()"
ng-model="click" />
</div>
<script>
var app = angular.module("app", []);
app.controller('app', ['$scope', function ($scope) {
$scope.click = 'geeksforgeeks';
$scope.alert = function () {
alert($scope.click);
}
}]);
</script>
</body>
</html>
Output:
