JavaScript MouseEvent-Fallstudie

Mausereignis

Wenn die Maus eine bestimmte Operation ausführt, wird ein Ereignisobjekt generiert, das alle Eigenschaften der Maus aufzeichnet, wenn das Ereignis ausgelöst wird.

Sie können das MouseEvent-Objekt in der Google-Konsole wie folgt ausdrucken.

Funktion Maus nach unten (e) {
var e = e||Ereignis;
console.log(e)
}
fenster.onload = Funktion (){ 
document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
}

Das ausgegebene MouseEvent lautet wie folgt:

Dieses Objekt hat viele Eigenschaften, aber die am häufigsten verwendeten sind offsetX, offsetY, clientX/clientY, pageX und pageY. Was entsprechen den verschiedenen Attributen?

Im Folgenden sind einige häufige Ereignisse aufgeführt:

altkey: Gibt an, ob die Alt-Taste gedrückt ist, wenn das Mausereignis ausgelöst wird. Wenn ja, wird „true“ zurückgegeben, andernfalls „false“.

Schaltfläche: Das Ereignisattribut gibt eine arabische Ziffer zurück, 0 steht für das Drücken der linken Taste, 1 für das Drücken des Scrollrads und 2 für das Drücken der rechten Taste.

offsetX, offsetY: Die Ereignisattribute geben die X- und Y-Koordinaten der Maus relativ zum Ereignisquellelement zurück, wenn das Ereignis ausgelöst wird. Standardereignisse haben keine entsprechenden Attribute.

clientX, clientY: Die Ereigniseigenschaften geben die horizontalen und vertikalen Koordinaten des Mauszeigers relativ zur Browserseite (oder zum Clientbereich) zurück, wenn das Ereignis ausgelöst wird.

pageX, pageY: Die Event-Attribute geben die horizontalen und vertikalen Koordinaten des Mauszeigers relativ zur oberen linken Ecke der gesamten Seite zurück, wenn das Event ausgelöst wird.

screenX, screenY: Die Ereignisattribute geben die horizontalen und vertikalen Koordinaten der Mausposition relativ zum Bildschirm des Benutzers zurück, wenn das Ereignis ausgelöst wird. Der Referenzpunkt oder Ursprung ist die obere linke Ecke des Bildschirms.

Nun, Textbeschreibungen sind immer lästig, deshalb hier ein klassisches Bild, um alles zu erklären:

Dies ist das Ende dieses Artikels über die Fallstudie zum JavaScript-Mausereignis (MouseEvent). Weitere relevante Inhalte zum JavaScript-Mausereignis (MouseEvent) finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!