Open In App

AngularJS ng-mousedown Directive

Last Updated : 08 Aug, 2022
Suggest changes
Share
Like Article
Like
Report

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. 

HTML
<!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. 

HTML
<!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:

 

Explore