MouseEnter vs MouseOver en AngularJs

Je jouais avec AngularJS les événements de la souris et a obtenu dans un problème. Je sais MouseEnter événement est déclenché lorsque la souris entre dans le conteneur d'un élément et là après MouseOver est déclenché pour tous les éléments enfants.
Grâce à cette animation La visualisation des événements de la souris

Cependant s'avère que dans mon cas, MouseEnter événement n'est jamais déclenché. Je suis en train de travailler sur Angulaire PhoneCat application (étape 10) et fait les modifications suivantes:

  1. Controllers.js: Ajout d'une méthode pour le journal des événements de souris
  2. phone-details.html: Ajout ng-mouseenter et ng-mouseleave gestionnaires

JS:

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

HTML:

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

Résultat:

Seulement mouseover et mouseout cas être connecté

Question:

Est ce comportement qui se passe parce que les images sont ul élément et nous sommes en déplaçant la souris dans les éléments enfants? et Comment puis-je obtenir mouseenter événement sur l'image?

Merci
MouseEnter vs MouseOver en AngularJs

InformationsquelleAutor Rohit | 2015-01-28
  1. 9

    Angulaire du ngMouseenter directive déclenche un événement dont le type est mouseover, comme vous pouvez le voir dans cette plunker.

    La différence de ngMouseover est qu'il est déclenché qu'une seule fois, lorsque la souris entre dans l'élément, et non pas après chaque mouvement à l'intérieur de cet élément aussi.

    <!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>
    • merci @audonex, mais c'est ce que j'essayais de comprendre. Pourquoi votre plunker ne jamais montrer mouseenter événement? Si les deux événements sont les mêmes, alors pourquoi il y a deux événements pour le même but?
    • Je la regarde tout le chemin que c'est d'un évènement déclenché par deux directives différentes, pour deux raisons différentes. Il devrait y avoir une raison pour laquelle le type d'événement mouseenter est souris, mais pour le moment je ne peux pas penser à tout. À mon humble avis il n'y a rien à comprendre, juste de l'accepter tel qu'il est. Il devrait y avoir pas de limites imposées par la ce.
    • "après chaque mouvement à l'intérieur de cet élément trop" - ce n'est pas correct, le mouvement n'a pas le feu ng-passage de la souris. Trouvé la réponse ici: stackoverflow.com/questions/7286532/...
    InformationsquelleAutor audonex