AngularJS | ng-mousedown Directive

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 popup alert when mouse button is pressed down. It is supported by all HTML elements.

Syntax:

 <element ng-mousedown="expression"> Contents... </element> 

Example 1: This example uses ng-mousedown Directive to set style of element after clicking the mouse.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <script src=
    </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>

chevron_right


Output:
Before clicking the element:
ngmousedown
After clicking the element:
ngmousedown

Example 2: This example uses ng-mousedown Directive to display alert message after clicking the input area.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <script src=
    </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>

chevron_right


Output:
Before clicking the input text:
ngmousedown
After clicking the input text:
ngmousedown



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.