Skip to content
Related Articles

Related Articles

AngularJS ng-mousedown Directive

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Aug, 2022
View Discussion
Improve Article
Save Article

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=
    </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=
    </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:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!