Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

AngularJS 1.3 Grundkurs

Reaktion auf Drücken und Loslassen der Maus

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
AngularJS verfügt über zwei Direktiven, um auf Interaktionen beim Drücken sowie Loslassen der Maus auf einem HTML-Element zu reagieren.
02:44

Transkript

In den kommenden Minuten möchte ich euch sehr gerne einmal die Direktiven ngMouseDown und ngMouseUp vorstellen Mit ngMouseDown seid ihr in der Lage, auf das Ereignis zu horchen wenn eine Maus auf einem HTML-Element-Objekt gedrückt wurde, aber noch nicht losgelassen wurde, und MouseUp , wenn ich dann entsprechend die Maus gedrücjt habe auf dem Objekt und auch anschließend auf dem Objekt dann losgelassen habe. Lass uns das Ganze einfach mal machen! Ich habe hier ein kleines Setup vorbereitet, wo keine Ereignisse noch da sind. So einfach zwei kleine Buttons, die dann hier vorhanden sind, wo ich dann drauf drücken möchte und los lassen später möchte. Jetzt gehen wir hin und schnappen uns hier das erste Objekt und sagen dann ngMouseDown an dieser Stelle. Und ich habe auch eine kleine Methode vorbereitet captureMouseEvent und den gebe ich dann hier das Event-Objekt mit. captureMouseEvent selber ist eine Funktion, die nichts anderes macht als die Information eins zu eins durchzulogen, das heißt, im Grunde genommen überhaupt kein Hexenwerk hier an dieser Stelle. Es wird also quasi nur ein log des events hier durchgeführt. Das Gleiche möchte ich jetzt machen für ngMouseUp. Also, schwupp, ngMouseUp. Und ich übergebe auch hier das event. Und nun lasst uns mal schauen! Ich wechsle hier entsprechend drauf. Klick ich jetzt hier auf diese Objekt. Dann werdet ihr sehen, dass ich das MouseDown-Ereignis hier bekomme vom Typ hier mousedown. Anschließend will ich hierMouseUp hier einmal probieren Ich klicke auf dem Objekt und lasse dann anschließend jetzt auf dem Objekt auch wieder los. Dann bekomme ich mein MouseUp an dieser Stelle. Dies mal gehe ich hin und drücke außerhalb mit der Maustaste, bewege mich nun und lasse jetzt los. Und man sieht, dass das ebenfalls funktioniert. Und jetzt klicke ich aber auf dem Objekt, bewege mich allerdings hinaus und lasse jetzt los. Und da sieht ihr, dass es nicht funktioniert, das heißt, MouseUp reagiert tatsächlich lediglich da drauf, ob die Maustaste losgelassen wurde, während ich auf diesem Objekt bin, wenn MouseDown lediglich darauf reagiert, wenn ich auf dem Objekt selber drauf geklickt habe. Solche Funktionalitäten sind extrem wichtig, wenn ihr beispielsweise so was, wie DropDownMenüs dann nachprogrammiert wollt oder so. Dann sind das sehr entspannende Direktiven, die ihr verwendet könnt. In diesem Video haben wir also gemeinsam die Direktiven ngMouseDown undngMouseUp kennengelernt, mit dem ich in der Lage bin, zu eruiren, ob auf einem Objekt die Maustaste betätigt wurde beziehungsweise losgelassen wurde.

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
Erscheinungsdatum:19.11.2014

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!