Question

我正在玩AngularJS鼠标事件并遇到了问题。我知道当鼠标进入元素的容器并且在为所有孩子触发 MouseOver 之后触发 MouseEnter 事件元素。感谢这个动画Visualizing mouse events

然而事实证明，在我的情况下，MouseEnter事件永远不会被触发。我正在开发Angular PhoneCat应用程序（步骤10）并进行了以下修改：

Controllers.js ：添加了记录鼠标事件的方法
phone-details.html ：添加了 ng-mouseenter 和 ng-mouseleave 处理程序

＆＃13;

    $scope.logMouseEvent = function() {
        switch (event.type) {
          case "mouseenter":
            console.log("Hey Mouse Entered");
            break;

          case "mouseleave":
            console.log("Mouse Gone");
            break;

          default:
            console.log(event.type);
            break;
        }

＆＃13;

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}" ng-Click="setImage(img)" ng-mouseenter="logMouseEvent()" ng-mouseleave="logMouseEvent()">
  </li>
</ul>

＆＃13;

结果：

仅记录鼠标悬停和 mouseout 事件

问题：

这种行为是否发生是因为图像是 ul 元素而我们正在移动子元素中的鼠标？以及如何在图像上获得 mouseenter 事件？

谢谢 enter image description here

Answer 1

Angular的ngMouseenter指令会触发类型为鼠标悬停的事件，如this plunker中所示。

与ngMouseover的区别在于它只被触发一次 - 当鼠标进入元素时，而不是在此元素中的每次移动之后。

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>

<body ng-app="">
  <button ng-mouseenter="lastEventType=$event.type">
    Enter
  </button>
  Event type: {{lastEventType}}
</body>

</html>

AngularJs中的MouseEnter与MouseOver

结果：

问题：

1 个答案: