MouseEnter-vs MouseOver in AngularJs

Spielte ich mit AngularJS Maus-Ereignisse aus und geriet in ein problem. Ich weiß MouseEnter Ereignis wird ausgelöst, wenn die Maus betritt container ein element und dort nach MouseOver ausgelöst wird für alle Kind-Elemente.
Dank dieser animation Visualisierung von Maus-events

Jedoch stellt sich heraus, dass in meinem Fall MouseEnter-Ereignis wird nie ausgelöst. Ich arbeite an Angular PhoneCat Anwendung (Schritt 10) und habe folgende änderungen vor:

  1. Controllers.js: Hinzugefügt eine Methode um log-Maus-events
  2. phone-details.html: Hinzugefügt ng-mouseenter und ng-mouseleave Handler

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>

Ergebnis:

Nur mouseover und mouseout Ereignis protokolliert wird

Frage:

Ist dieses Verhalten geschieht, weil die Bilder sind ul element und wir bewegen die Maus in die Kind-Elemente? und Wie bekomme ich mouseenter Ereignis auf dem Bild?

Danke
MouseEnter-vs MouseOver in AngularJs

InformationsquelleAutor Rohit | 2015-01-28
  1. 9

    Eckig ist ngMouseenter Richtlinie feuert ein Ereignis, dessen Typ mouseover, wie Sie sehen können, in diese plunker.

    Den Unterschied von ngMouseover ist, dass es ausgelöst wird nur einmal - wenn die Maus betritt das element, nicht nach jeder Bewegung in diesem element zu.

    <!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>
    • danke @audonex, aber das ist, was ich versucht habe, zu verstehen. Warum Ihr plunker nie zeigen mouseenter-Ereignis? Wenn beide Ereignisse gleich sind, warum dann gibt es zwei Ereignisse, die für den gleichen Zweck?
    • Ich betrachte es auf die Weise, dass es ein Ereignis ausgelöst durch zwei unterschiedliche Richtlinien für zwei unterschiedliche Zwecke. Es sollte ein Grund sein, warum die Art der mouseenter-Ereignis mouseover, aber im moment ich kann nicht jeder denken. IMHO gibt es nichts zu verstehen, nur akzeptieren, wie es ist. Es sollte keine Einschränkungen durch diese verursacht werden.
    • danke @audonex. Neugier
    • "nach jeder Bewegung in diesem element zu" - dies ist nicht korrekt, Bewegung nicht ausgelöst ng-mouseover. Fand die Antwort hier: stackoverflow.com/questions/7286532/...
    InformationsquelleAutor audonex
Schreibe einen Kommentar