Verschiedene Methoden zum Ermitteln der Mausposition basierend auf JavaScript_Javascript-Kenntnissen

Bei einigen DOM-Operationen beschäftigen wir uns häufig mit der Position von Elementen. Was enttäuschend ist, ist, dass verschiedene Browser unterschiedliche Ergebnisse erzielen, und dass dies bei einigen Browsern möglicherweise nicht der Fall ist Einige einfache Zusammenfassungen zum Erhalten der Mausklick-Positionskoordinaten. Es gibt keine spezielle Aussage, dass der Code unter IE8, FireFox und Chrome getestet und kompatibel ist

Mausklick-Positionskoordinaten

relativ zum Bildschirm

Wenn es sich um einen Mausklick handelt, um die Position zu bestimmen, ist es relativ einfach. Nach dem Erhalten des Mausklickereignisses ermitteln die Ereignisse screenX und screenY die Klickposition relativ zum linken und oberen Rand des Bildschirms Verschiedene Browser berücksichtigt. Die Leistung ist ziemlich konsistent.

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.screenX,'y':screenY}
    } 

Relativ zum Browserfenster

Einfacher Code kann implementiert werden, aber das reicht nicht aus, da wir in den meisten Fällen die Koordinaten der Mausklickposition relativ zum Browserfenster erhalten möchten. Die Attribute clientX und clientY des Ereignisses repräsentieren jeweils die Koordinaten des Mausklickposition relativ zum Dokument. Linker Rand, oberer Rand. Auf ähnliche Weise haben wir Code wie diesen geschrieben

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.clientX,'y':clientY}
    } 

Relatives Dokument

Bei einfachen Tests gibt es kein Problem, aber clientX und clientY erhalten Koordinaten relativ zum aktuellen Bildschirm und ignorieren die Seiten-Scroll-Faktoren. Dies ist unter vielen Bedingungen nützlich, aber wenn wir das Scrollen der Seite berücksichtigen müssen, also relativ zum Dokument (Was soll ich tun, wenn die Koordinaten des Körperelements ermittelt werden)? Fügen Sie einfach die Scroll-Verschiebung hinzu. Als nächstes versuchen wir, die Scroll-Verschiebung der Seite zu berechnen.

Tatsächlich wird das Problem unter Firefox viel einfacher sein, da Firefox die Attribute pageX und pageY unterstützt. Diese beiden Attribute berücksichtigen bereits das Scrollen der Seite.

In Chrome können Sie die Seiten-Scroll-Verschiebung über document.body.scrollLeft und document.body.scrollTop berechnen, während Sie in IE die Seiten-Scroll-Verschiebung über document.documentElement.scrollLeft und document.documentElement.scrollTop berechnen können

function getMousePos(event) {
      var e = event || window.event;
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      var x = e.pageX || e.clientX + scrollX;
      var y = e.pageY || e.clientY + scrollY;
      //alert('x: ' + x + '\ny: ' + y);
      return { 'x': x, 'y': y };
    } 

Bei dem obigen Inhalt handelt es sich um die verschiedenen vom Herausgeber eingeführten Methoden zum Ermitteln der Mausposition basierend auf JavaScript.