javascript AngularJs 中的 MouseEnter 与 MouseOver
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28200125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MouseEnter vs MouseOver in AngularJs
提问by Rohit
I was playing with AngularJS mouse events and got into a problem. I know MouseEnterevent is fired when mouse enters container of an element and there after MouseOveris fired for all child elements. Thanks to this animation Visualizing mouse events
我在玩 AngularJS 鼠标事件并遇到了问题。我知道当鼠标进入元素的容器时会触发MouseEnter事件，并且在为所有子元素触发MouseOver之后。感谢这个动画可视化鼠标事件
However turns out that in my case MouseEnter event is never fired. I am working on Angular PhoneCat application (step-10) and did following modifications:
然而事实证明，在我的情况下，MouseEnter 事件从未被触发。我正在开发 Angular PhoneCat 应用程序（第 10 步）并进行了以下修改：
- Controllers.js: Added a method to log mouse events
- phone-details.html: Added ng-mouseenterand ng-mouseleavehandlers
- 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>Result:
结果：
Only mouseoverand mouseoutevent being logged
仅记录mouseover和mouseout事件
Question:
问题：
Is this behavior happening because images are ulelement and we are moving mouse in child elements? and How can I get mouseenterevent on image?
这种行为是否发生是因为图像是ul元素并且我们在子元素中移动鼠标？以及如何在图像上获取mouseenter事件？
Thank you
谢谢
回答by audonex
Angular's ngMouseenter directive fires an event whose type is mouseover, as you can see in this plunker.
Angular 的 ngMouseenter 指令会触发一个类型为mouseover的事件，你可以在这个 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>
