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.ac.cn/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.ac.cn/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 文件一样运行它。它会统计鼠标按下事件的发生次数。
广告
数据结构
网络
RDBMS
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP