web-dev-qa-db-fra.com

MouseEnter vs MouseOver dans AngularJs

Je jouais avec des événements de souris AngularJS et j'ai eu un problème. Je sais MouseEnter l'é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. Merci à cette animation Visualisation des événements de souris

Il s'avère cependant que dans mon cas, l'événement MouseEnter n'est jamais déclenché. Je travaille sur Angular Application PhoneCat (étape-10) et j'ai effectué les modifications suivantes:

  1. Controllers.js : Ajout d'une méthode pour enregistrer les événements de la souris
  2. phone-details.html : Ajouté ng-mouseenter et ng-mouseleave gestionnaires
    $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>

Résultat:

Uniquement survol de la souris et mouseout événement enregistré

Question:

Ce comportement se produit-il parce que les images sont des éléments ul et que nous déplaçons la souris dans les éléments enfants? et comment puis-je obtenir mouseenter événement sur l'image?

Je vous remercie enter image description here

javascripthtmlangularjsmouseevent
18
Rohit

La directive ngMouseenter d'Angular déclenche un événement dont le type est survolé , comme vous pouvez le voir dans ce plongeur .

La différence avec ngMouseover est qu'il n'est déclenché qu'une seule fois - lorsque la souris entre dans l'élément, pas après chaque mouvement dans cet élément également.

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