AngularJs中的MouseEnter与MouseOver

Question

I was playing with AngularJS mouse events and got into a problem. 我正在玩AngularJS鼠标事件并遇到了问题。 I know MouseEnter event is fired when mouse enters container of an element and there after MouseOver is fired for all child elements. 我知道MouseEnter事件在鼠标进入元素的容器时触发，并且在为所有子元素触发MouseOver之后触发。 Thanks to this animation Visualizing mouse events 感谢这个动画可视化鼠标事件

However turns out that in my case MouseEnter event is never fired. 但事实证明，在我的情况下，MouseEnter事件永远不会被触发。 I am working on Angular PhoneCat application (step-10) and did following modifications: 我正在开发Angular PhoneCat应用程序（步骤10）并做了以下修改：

Controllers.js : Added a method to log mouse events Controllers.js ：添加了记录鼠标事件的方法
phone-details.html : Added ng-mouseenter and ng-mouseleave handlers 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>

Result: 结果：

Only mouseover and mouseout event being logged 仅记录鼠标悬停和mouseout事件

Question: 题：

Is this behavior happening because images are ul element and we are moving mouse in child elements? 这种行为是否发生，因为图像是ul元素，我们在子元素中移动鼠标？ and How can I get mouseenter event on image? 以及如何在图像上获得mouseenter事件？

Thank you 谢谢在此输入图像描述

Answer 1

Angular's ngMouseenter directive fires an event whose type is mouseover , as you can see in this plunker . Angular的ngMouseenter指令触发一个类型为鼠标悬停的事件，正如您在此plunker中所看到的。

The difference from ngMouseover is that it's fired only once - when mouse enters the element, not after every movement within this element too. 与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

问题描述

Result: 结果：

Question: 题：

1 个解决方案

解决方案1
9 2015-01-28 19:42:08

AngularJs中的MouseEnter与MouseOver

问题描述

Result: 结果：

Question: 题：

1 个解决方案

解决方案1 9 2015-01-28 19:42:08

解决方案1
9 2015-01-28 19:42:08