AngularJS ng-mouseup Directive
Last Updated :
11 Jul, 2025
Improve
The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements.
Syntax:
<element ng-mouseup="expression">
Contents...
</element> Parameter value:
- expression: When the mouse click is completed then the expression will be executed.
Example 1: This example uses the ng-mouseup Directive to change the text effect.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<title>ng-mouseup Directive</title>
</head>
<body ng-app style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mouseup Directive</h2>
<div>
<p ng-mouseup="geek={'color':'green',
'font-size':'larger'}"
ng-mousedown="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-mouseup Directive to display the array element.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<title>ng-mouseup Directive</title>
</head>
<body ng-app="app" style="padding:20px">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mouseup Directive</h2>
<div ng-controller="app">
<div ng-repeat="p in array">
<div style="background-color:green;
color:white;
height:30px;
width:10%"
ng-mouseup="mouseOver(p)">{{p}}
</div><br>
</div>
<pre>You just clicked: <b>{{input}}</b></pre>
</div>
<script>
var app = angular.module("app", []);
app.controller('app', ['$scope', function ($scope) {
$scope.mouseOver = function (data) {
$scope.input = data;
};
$scope.array = ["First", "Second"]
}]);
</script>
</body>
</html>
Output:
