javascript - MouseEnter vs MouseOver in AngularJs

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>

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

Share Improve this question asked Jan 28, 2015 at 18:52 Rohit 6,61316 gold badges64 silver badges92 bronze badges

Found the correct answer here: stackoverflow./questions/7286532/… – Israel Commented Apr 11, 2016 at 16:59

Add a ment |

1 Answer 1

Sorted by: Reset to default 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./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - MouseEnter vs MouseOver in AngularJs - Stack Overflow

Result:

Question:

1 Answer 1

与本文相关的文章

评论列表(0)