Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

AngularJS 1.3 Grundkurs

Mauszeigerposition überprüfen

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Zwei weitere Direktiven überprüfen in AngularJS, ob sich der Mauszeiger auf einem HTML-Element befindet. Darin definierte Ereignisse führen entsprechende Aktionen aus.
03:02

Transkript

Innerhalb der AngularJS-Feld werden uns zwei Direktiven zur Verfügung gestellt, mit dem wir in der Lage sind, zu überprüfen, ob sich die Maus auf einem Objekt befindet. Um das Ganze für euch mal demonstrierbar zu machen, habe ich ein kleines Beispiel hier vorbereitet, und in diesem Beispiel sieht ihr, dass ich zwei Container habe, und in diesem Container befinden sich unter anderem auch Buttons. Und was ich gleich möchte, ist, dass ich euch einmal demonstriere, wie ich mit der Direktive ng-mouse-over über den oberen Container hier gehe und mit ng-mouse-enter über den unteren Container. Und lass uns dann mal schauen, was für Information dann erhalten und wie das Verhalten ist und vor allen Dingen wurde Unterschied zwischen Over und Enter ist. Um das Ganze zu machen, schnappe ich mir das ngMouseOver auf dem oberen Element, und werde jetzt hier eine kleine Funktion auf den Scope zur Verfügung stellen beziehungsweise programmieren, nämlich scope.captureMouseEvent gleich function, und das event möchte ich gerne als Ergebnis haben. Und dieses Ergebnis hätte ich auch sehr gerne mal mit dem console.log ausgegeben. Perfekt! Großartig! Und jetzt werden wir einfach captureEvent hier verwenden und $event übergeben. Großartig! Und wiederholen das Ganze noch mal in dem unteren Container und diesmal mit ng-mouseenter Da ist es so! Auch hier das captureMouseEvent. Kann ich aber auch schnell kopieren, dann vertippe ich mich nicht. Großartig! Dann lasst uns mal schauen, was passiert, wenn wir ma das Ganze jetzt hier testen! Wenn wir sehen, dass, wird ich jetzt hier mit dem Mouse drübergehen, ich dann entsprechend wirklich ein event bekommen habe Dieses event, das ich hier bekommen habe, ist, wenn wir etwas runterscrollen, hier auch zu erkennen vom Typ MouseOver. Achtet aber mal da drauf, was passiert, wenn ich mich hier mit der Maus bewege und einfach mal zum Beispiel zwischen den unterschiedlichen Buchstaben hin verwechsle und ähnliches. Dann werdet ihr sehen, dass bei dem Mouse Over jedes Mal das Ereignis gefeuert wird, wenn ich ganz kurzfristig diesen Gesamtcontainer hier verlassen habe. Und das tue ich im Grunde genommen jedesmal, wenn ich auf button draufgehe, jedesmal, wenn ich auf eine Schrift draufgehe und die Schrift wieder verlasse. Und dementsprechend ist das Mouse Over natürlich ein sehr häufig gefeuertes Konstrukt in dieser Konstellation. Mouse Enter hingegen begreift wirklich, dass ich einfach nur den Eintritt der Maus hier registriert haben möchte. Anschließen kann ich hier beliebig hier mit der Maus hoch und runter gehen, und es wird kein weiteres Ereignis hier an dieser Stelle gefeuert. In diesem Video haben wir gemeinsam gelernt, dass es die Direktiven ng-mouseover und ng-mouseenter gibt und welche Bedeutung diese Direktiven und vor einigen auch die Ereignisse dahinter haben.

AngularJS 1.3 Grundkurs

Legen Sie mit AngularJS moderne, anspruchsvolle Webprojekte auf der Basis von HTML, CSS und JavaScript an.

4 Std. 15 min (74 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
AngularJS AngularJS 1.3
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:19.11.2014
Laufzeit:4 Std. 15 min (74 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!