MouseEnter против MouseOver в AngularJs

Я играл с событиями мыши AngularJS и попал в проблему. Я знаю, что событие MouseEnter запускается, когда мышь входит в контейнер элемента, а после MouseOver запускается для всех дочерних элементов. Благодаря этой анимации Визуализация событий мыши

Однако оказывается, что в моем случае событие MouseEnter никогда не запускается. Я работаю над приложением Angular PhoneCat (шаг 10) и сделал следующие изменения:

  • Controllers.js: добавлен метод для регистрации событий мыши.
  • phone-details.html. Добавлены обработчики ng-mouseenter и ng-mouseleave.

    $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;
        }
<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>

Ответы

Ответ 1

Angular Директива ngMouseenter запускает событие, тип которого mouseover, как вы можете видеть в этом 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>