AngularJS – ng-mousedown 指令
AngularJS 中的 ng-mousedown 指令 基本上指定了鼠标按下事件中的自定义事件。每当鼠标按下且调用鼠标按下事件时,我们都可以执行多种功能。
语法
<element ng-mousedown="expression">..content..</element>
示例 − ngMousedown 指令
在 Angular 项目目录中创建一个文件 "ngMousedown.html",然后复制粘贴以下代码片段。
<!DOCTYPE html> <html> <head> <title>ngMousedown Directive</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body ng-app style="text-align: center;"> <h1 style="color: green;"> Welcome to Tutorials Point </h1> <h2> angularjs | ngMousedown Directive </h2> <div> <p ng-mousedown="demo={'background-color':'green','font-size':'larger'}" ng-mouseup="demo={'font-size':''}" ng-style="demo" ng-class="'button'" > Click mouse and hold !!! </p> </div> </body> </html>
输出
要运行以上代码,只需转到你的文件并像普通的 HTML 文件一样运行它。
示例 2
在 Angular 项目目录中创建一个文件 "ngMousedown.html",然后复制粘贴以下代码片段。
<!DOCTYPE html> <html> <head> <title>ngMousedown Directive</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body ng-app style="text-align: center;"> <h1 style="color: green;"> Welcome to Tutorials Point </h1> <h2> angularjs | ngMousedown Directive </h2> <button ng-mousedown="count = count + 1" ng-init="count=0"> Increment (on mouse down) </button> count: {{count}} </body> </html>
输出
要运行以上代码,只需转到你的文件并像普通的 HTML 文件一样运行它。它会统计鼠标按下事件的发生次数。
广告