Methode zur Implementierung der Erfassung der aktuellen Position der Maus mit JavaScript

Manchmal müssen wir die Entfernung des Fensters oder der Mausbewegung erhalten. In diesem Fall können wir die gewünschten Ergebnisse durch Berechnung der Position des Mauszeigers vor und nach dem Verschieben im Dokument erhalten. Hier werden einige Ereignisattribute vorgestellt:

1、Kundengebietkoordinatenposition

　　Mausereignisse treten immer an einer bestimmten Stelle im Browserfenster auf. Diese Positionsinformationen werden in den Eigenschaften clientX und clientY des Ereignisobjekts gespeichert. Der Wert dieser Eigenschaften stellt die Horizontale und Vertikale Koordinate des Mauszeigers dar, wenn das Ereignis auftritt, innerhalb des Ansichtsfensters (ohne die Entfernung des Seitenrollens). Wie in der folgenden Abbildung gezeigt:

var div = document.getElementById("myDiv"); //Elemente erhalten
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Screen coordinates: ") + event.screenX + " + event.screenY);
});

Anmerkung: In dem Fall, EventUtil.on() bedeutet, dass ein Ereignis an das Element gebunden wird, EventUtil.getEvent(event) bedeutet, dass das Ereignisobjekt erhalten wird. EventUtil ist ein benutzerdefiniertes Ereignisobjekt (durch JavaScript implementiert), das einige Methoden für verschiedene Browser enthält. Nähere Informationen finden Sie in einem anderen Artikel <i>Einige crossbrowserige Ereignismethoden</i>. Wenn das Projekt ein jQuery-Plugin verwendet, kann es durch den entsprechenden Methodenname ersetzt werden.

2、Seitenkoordinatenposition

　　Die Eigenschaften pageX und pageY des Ereignisobjekts können Ihnen sagen, an welcher Stelle im Dokument das Ereignis aufgetreten ist. Mit anderen Worten, diese beiden Eigenschaften stellen die Position des Mauszeigers im Dokument dar (entspricht den Koordinaten des Mauszeigers im Fenster). + Entfernung des Rollens der Seite).

var div = document.getElementById("myDiv");//Ermitteln Sie das Element mit der ID "myDiv".
EventUtil.on(div, "click", function(event){//Klicken Sie auf das Element binden
 event = EventUtil.getEvent(event);//Event-Objekt erhalten
 var pageX = event.pageX, pageY = event.pageY;
 if (pageX === undefined){//IE8und frühere Versionen
  pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 if (pageY === undefined){
  pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 alert("Page coordinates: ") + pageX + " + pageY);
});

3、Bildschirmkoordinaten

　　Durch die screenX- und screenY-Attribute können Sie die Koordinaten des Mauszeigers relativ zum gesamten Bildschirm bestimmen, wie im folgenden Bild gezeigt:

var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Screen coordinates: ") + event.screenX + " + event.screenY);
});

Dieser Artikel basiert auf 'JavaScript Advanced Programming Design Third Edition'.

Vielen Dank für das Lesen, ich hoffe, es hilft Ihnen, danke für Ihre Unterstützung dieser Website!