Ausführliche Erläuterung der Attribute „screenY', „pageY', „clientY', „layerY' und „offsetY' der Javascript-Fähigkeiten von Mausereignissen

screenY

Der Versatz der Maus relativ zur oberen linken Ecke des Monitorbildschirms

SeiteY

Der Versatz der Maus relativ zur oberen linken Ecke der Seite (sein Wert wird durch die Bildlaufleiste nicht beeinflusst)

Dieses Attribut wird unter IE9 nicht unterstützt

Aber Sie können Code schreiben, um es zu berechnen. Implementierung in jQuery:

Code kopieren Der Code lautet wie folgt:

//SeiteX/Y berechnen, falls fehlend und clientX/Y verfügbar
if ( event.pageX == null && original.clientX != null ) {
EventDoc = event.target.ownerDocument || document;
doc = eventDoc.documentElement;
Body = eventDoc.body;
Event.pageX = original.clientX ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft||body&&body.clientLeft || 0 );
Event.pageY = original.clientY ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );
} 

Machen Sie es einfach.

Der Versatz der Maus relativ zum Browser-Ansichtsfenster plus die verborgene Höhe der Bildlaufleiste des Dokuments minus der clientTop des Dokuments.

Code kopieren Der Code lautet wie folgt:

var pageY = event.clientY document.documentElement. scrollTop-document.documentElement.clientTop

Warum document.documentElement.clientTop subtrahieren

Dies ist der Offset des Dokuments, der für Browser unter IE8 eindeutig ist. Auch wenn der Abstand und der Rand von HTML und Body auf 0 gesetzt sind, wird sein Wert nicht beeinflusst.

Unter iE7 getestet und erhalten                              

Code kopieren Der Code lautet wie folgt:

document.documentElement.clientTop --> 2px document.documentElement.clientLeft --> document.bocy.clientTop --> 0px document.body.clientLeft -->

KundeY

Der Versatz der Maus relativ zur oberen linken Ecke des Browser-Ansichtsfensters

Achten Sie auf den Unterschied zwischen clienty und pagey. Der Wert von Clienty entspricht dem von Pagey

, wenn auf der Seite kein Rollbalken vorhanden ist.

------------------------------------------------Split---------- -- --------------------------------

SchichtY

Wenn der Positionsstil eines Elements nicht der standardmäßige statische Stil ist, sagen wir, dass dieses Element ein Positionierungsattribut hat.

Suchen Sie das nächstgelegene Element mit Positionierungsattribut zwischen dem Element, das derzeit das Mausereignis auslöst, und seinem Vorgängerelement, berechnen Sie den Versatzwert der Maus dazu und ermitteln Sie den diplomatischen Punkt der oberen linken Ecke des Elementrands als relativer Punkt. Wenn kein Element mit einem Positionierungsattribut gefunden wird, wird der Offset relativ zur aktuellen Seite berechnet, was pageY entspricht.

Dieses Attribut wird unter IE9 nicht unterstützt, kann aber durch seinen eindeutigen OffsetY

ersetzt werden

OffsetY

IE-spezifische Eigenschaften

Der Unterschied zwischen offsetY und LayerY besteht darin, dass bei der Berechnung des Offset-Werts der erstere relativ zum inneren Schnittpunkt der oberen linken Ecke des Elementrands ist Der Offsetwert ist ein negativer Wert. Darüber hinaus ist es offsetY egal, ob das Element, das das Ereignis auslöst, über ein Positionierungsattribut verfügt. Es berechnet immer den Offsetwert relativ zu dem Element, das das Ereignis auslöst.

Angesichts des Unterschieds zwischen LayerY und OffsetY müssen Sie darauf achten, diese kompatibel zu verwenden

1. Das Element, das das Ereignis auslöst, muss das Positionierungsattribut festlegen.

​ ​ 2. Wenn das Element einen oberen Rand hat, hat LayerY einen Wert für die obere Randbreite mehr als der OffsetY-Wert.

Code kopieren Der Code lautet wie folgt:

//Die element.borderTopWidth muss hier die tatsächlich berechnete obere Randbreite des Elements sein.
var borderTopWidth = window.getComputedStyle ? window.getComputedStyle(element,null).borderTopWidth: element.currentStyle.borderTopWidth; var offsetY = event.offsetY||(event.layerY borderTopWidth);

Über die Attribute „layerY“ und „offsetY“ können Sie ganz einfach den Versatz der Maus relativ zu dem an das Mausereignis gebundenen Element berechnen, was zu bestimmten Zeiten sehr nützlich ist. 

Die Offset-Eigenschaften der Maus in vertikaler Richtung werden hier ausführlich beschrieben. Die Offset-Eigenschaften in horizontaler Richtung sind ähnlich und werden nicht noch einmal besprochen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.