Ausführliche Erklärung, wie js die Mausposition erhält, example_javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt die Methode zum Ermitteln der Mausposition in js. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Verwendung von Javascript zum Ermitteln der Mausposition (Cursorposition) auf der aktuellen Seite wird in vielen Situationen verwendet, z. B. beim Ziehen und Ablegen, als Tooltip usw. Natürlich müssen wir uns hier immer noch mit Browserkompatibilitätsproblemen auseinandersetzen. Verschiedene Browser behandeln diese zugehörigen Attribute unterschiedlich. Hier finden Sie eine detaillierte Einführung in die Unterschiede und endgültigen Lösungen, wenn Browser diese Attribute verarbeiten.

Der Javascript-Code lautet wie folgt:

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>

Anwendung:

document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
}

Eine detaillierte Beschreibung des Codes lautet wie folgt:

Wir müssen zuerst ein EVNET-Objekt deklarieren, unabhängig von Bewegung, Klick, Tastendruck usw. Im Internet Explorer ist das Ereignis eine globale Variable und wird in window.event gespeichert. In Firefox oder anderen Browsern wird das Ereignis über die entsprechende Funktion abgerufen. Wenn wir document.onmousemove die Funktion „mouseMove“ zuweisen, erhält „mouseMove“ das Mausbewegungsereignis.

Damit ev das Ereignisereignis in allen Browsern erhält, funktioniert „||window.event“ unter Firefox nicht, da ev bereits ein Wert zugewiesen ist. In MSIE ist ev leer, daher erhalten Sie window.event .

Da wir in diesem Artikel die Mausposition mehrmals ermitteln müssen, haben wir eine MousePosition-Funktion entworfen, die einen Parameter enthält: Ereignis.

Da wir unter MSIE und anderen Browsern laufen, verwenden Firefox und andere Browser event.pageX und event.pageY, um die Position der Maus relativ zum Dokument darzustellen, wenn Sie ein 500*500-Fenster und Ihre Maus haben ist Absolut in der Mitte, dann sind die Werte von SeiteX und SeiteY beide 250, und wenn Sie 500 nach unten scrollen, wird SeiteY zu 750.

MSIE ist genau das Gegenteil. Es verwendet event.clientX und event.clientY, um anzuzeigen, dass die Maus der Position des Fensters entspricht, nicht dem Dokument. Wenn Sie im gleichen Beispiel um 500 nach unten scrollen, ist clientY immer noch 250, daher müssen wir die Eigenschaften scrollLeft und scrollTop relativ zum Dokument hinzufügen. Schließlich beginnen Dokumente in MSIE nicht bei 0,0, sondern haben normalerweise einen kleinen Rand (normalerweise 2 Pixel). Die Größe des Randes wird in document.body.clientLeft und clientTop definiert.

Vollständiger Code:

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
   if(ev.pageX || ev.pageY){
     return {x:ev.pageX, y:ev.pageY};
   }
   return {
     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
     y:ev.clientY + document.body.scrollTop - document.body.clientTop
   };
}
document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
   document.getElementByIdx('mouseXPosition').value = mousePos.x;
   document.getElementByIdx('mouseYPosition').value = mousePos.y;
}
</script>

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.