MouseEnter vs MouseOver in AngularJs

Question

I was playing with AngularJS mouse events and got into a problem. I know MouseEnter event is fired when mouse enters container of an element and there after MouseOver is fired for all child elements. Thanks to this animation Visualizing mouse events

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:

Controllers.js: Added a method to log mouse events
phone-details.html: Added ng-mouseenter and ng-mouseleave handlers

    $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

Question:

Is this behavior happening because images are ul element and we are moving mouse in child elements? and How can I get mouseenter event on image?

Thank you enter image description here

Found the correct answer here: http://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover — Israel, Apr 11 '16 at 16:59

score 9 · Answer 1 · answered Jan 28 '15 at 19:42

9

Angular's ngMouseenter directive fires an event whose type is mouseover, as you can see in this 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.

<!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>

answered Jan 28 '15 at 19:42

audonex

115
5

thanks @audonex, but that's what I was trying to understand. Why your plunker never show mouseenter event? If both events are same then why there are two events for the same purpose? – Rohit Jan 28 '15 at 19:53
@Rohit I look at it the way that it's one event triggered by two different directives for two different purposes. There should be a reason why the type of mouseenter event is **mouseover**, but at the moment I can't think of any. IMHO there is nothing to understand, just accept the way it is. There should be no limitations caused by this. – audonex Jan 29 '15 at 02:05
"after every movement within this element too" - this is not correct, movement doesn't fire ng-mouseover. Found the answer here: http://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover – Israel Apr 11 '16 at 17:01

MouseEnter vs MouseOver in AngularJs

Result:

Question:

1 Answers1