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 檔案一樣執行它。它會統計滑鼠按下事件的發生次數。

更新於: 2021-10-08

286 個瀏覽次數

開啟你的 職業生涯

透過完成該課程獲得認證

開始
廣告
© . All rights reserved.