angularJS的$event事件

最新推荐文章于 2024-11-27 19:01:14 发布

转载最新推荐文章于 2024-11-27 19:01:14 发布 · 795 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2391658/blog/1519475

文章标签：

#javascript #python #ViewUI

本文介绍Angular中处理鼠标事件的方法，包括mousedown、mouseup等六种事件的使用方式，并提供了一个综合示例，展示了如何通过$event获取鼠标位置信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

angular支持6种event事件，分别是：

         1、ng-mousedown
         2、ng-mouseup
         3、ng-mouseenter
         4、ng-mouseleave
         5、ng-mousemove
         6、ng-mouseover
传值变量是$event,方式为：onMouseDown($event)

以下是一个完整的演示实例：

HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <h3>1. Click</h3>
    <button id="firstBtn" ng-click="onFirstBtnClick()">Click me</button>
    <strong>RESULT:</strong> {{onFirstBtnClickResult}}<br />
    <br />
    <h3>2. Click with Dependency Injection</h3>
    <label>Type something: <input type="text" ng-model="secondBtnInput"></label>
    <button id="secondBtn" ng-click="onSecondBtnClick(secondBtnInput)">Click me</button><br />
    <strong>RESULT:</strong> {{onSecondBtnClickResult}}<br />
    <br />
    <h3>3. Double click</h3>
    Double-click the square<br />
    <img src="images/square.png" ng-dblclick="onDblClick()" /><br />
    <strong>RESULT:</strong> {{onDblClickResult}}<br />
    <h3>4. Mouse down, up, enter, leave, move, over</h3>
    Move the mouse on the square<br />
    <img src="images/square.png"
         ng-mousedown="onMouseDown($event)"
         ng-mouseup="onMouseUp($event)"
         ng-mouseenter="onMouseEnter($event)"
         ng-mouseleave="onMouseLeave($event)"
         ng-mousemove="onMouseMove($event)"
         ng-mouseover="onMouseOver($event)" /><br />
    <strong>MOUSE DOWN RESULT:</strong> {{onMouseDownResult}}<br />
    <strong>MOUSE UP RESULT:</strong> {{onMouseUpResult}}<br />
    <strong>MOUSE ENTER RESULT:</strong> {{onMouseEnterResult}}<br />
    <strong>MOUSE LEAVE RESULT:</strong> {{onMouseLeaveResult}}<br />
    <strong>MOUSE MOVE RESULT:</strong> {{onMouseMoveResult}}<br />
    <strong>MOUSE OVER RESULT:</strong> {{onMouseOverResult}}
  </div>
</body>
</html>

JS：

angular.module("mainModule", [])
  .controller("mainController", function ($scope)
  {
    // Initialization
    $scope.onFirstBtnClickResult = "";
    $scope.secondBtnInput = "";
    $scope.onDblClickResult = "";
    $scope.onMouseDownResult = "";
    $scope.onMouseUpResult = "";
    $scope.onMouseEnterResult = "";
    $scope.onMouseLeaveResult = "";
    $scope.onMouseMoveResult = "";
    $scope.onMouseOverResult = "";

    // Utility functions

    // Accepts a MouseEvent as input and returns the x and y
    // coordinates relative to the target element.
    var getCrossBrowserElementCoords = function (mouseEvent)
    {
      var result = {
        x: 0,
        y: 0
      };

      if (!mouseEvent)
      {
        mouseEvent = window.event;
      }

      if (mouseEvent.pageX || mouseEvent.pageY)
      {
        result.x = mouseEvent.pageX;
        result.y = mouseEvent.pageY;
      }
      else if (mouseEvent.clientX || mouseEvent.clientY)
      {
        result.x = mouseEvent.clientX + document.body.scrollLeft +
          document.documentElement.scrollLeft;
        result.y = mouseEvent.clientY + document.body.scrollTop +
          document.documentElement.scrollTop;
      }

      if (mouseEvent.target)
      {
        var offEl = mouseEvent.target;
        var offX = 0;
        var offY = 0;

        if (typeof(offEl.offsetParent) != "undefined")
        {
          while (offEl)
          {
            offX += offEl.offsetLeft;
            offY += offEl.offsetTop;

            offEl = offEl.offsetParent;
          }
        }
        else
        {
          offX = offEl.x;
          offY = offEl.y;
        }

        result.x -= offX;
        result.y -= offY;
      }

      return result;
    };

    var getMouseEventResult = function (mouseEvent, mouseEventDesc)
    {
      var coords = getCrossBrowserElementCoords(mouseEvent);
      return mouseEventDesc + " at (" + coords.x + ", " + coords.y + ")";
    };

    // Event handlers
    $scope.onFirstBtnClick = function () {
      $scope.onFirstBtnClickResult = "CLICKED";
    };

    $scope.onSecondBtnClick = function (value) {
      $scope.onSecondBtnClickResult = "you typed '" + value + "'";
    };

    $scope.onDblClick = function () {
      $scope.onDblClickResult = "DOUBLE-CLICKED";
    };

    $scope.onMouseDown = function ($event) {
      $scope.onMouseDownResult = getMouseEventResult($event, "Mouse down");
    };

    $scope.onMouseUp = function ($event) {
      $scope.onMouseUpResult = getMouseEventResult($event, "Mouse up");
    };

    $scope.onMouseEnter = function ($event) {
      $scope.onMouseEnterResult = getMouseEventResult($event, "Mouse enter");
    };

    $scope.onMouseLeave = function ($event) {
      $scope.onMouseLeaveResult = getMouseEventResult($event, "Mouse leave");
    };

    $scope.onMouseMove = function ($event) {
      $scope.onMouseMoveResult = getMouseEventResult($event, "Mouse move");
    };

    $scope.onMouseOver = function ($event) {
      $scope.onMouseOverResult = getMouseEventResult($event, "Mouse over");
    };
  });

效果演示：

http://www.angularjshub.com/examples/eventhandlers/mouseevents/

转载于:https://my.oschina.net/u/2391658/blog/1519475