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 檔案一樣執行它。它會統計滑鼠按下事件的發生次數。
廣告
資料結構
網路
RDBMS
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP