JavaScript/DOM/Event/clientX

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft clientX, clientY (Anzeigebereich-relative Mauszeiger-Position) nach der Microsoft-Syntax) speichert die horizontalen Pixel (clientX) und die vertikalen Pixel (clientY) der Mauszeiger-Position relativ zur oberen linken Ecke des Anzeigebereichs des Fensters, in dem das aktuelle Dokument dargestellt wird. Bezieht sich z.B. auf Mausereignisse.

  • DOM 2.0
  • JScript
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • Nur Lesen / Read Only
Beispiel ansehen …
    function Mausklick (Ereignis) {
 
      if (!Ereignis) Ereignis = window.event;
 
      if (document.getElementById) {
          document.getElementById("Springer").style.left = Ereignis.clientX + "px";
          document.getElementById("Springer").style.top = Ereignis.clientY + "px";
      } 
    }
 
    document.onmousedown = Mausklick;

Das Beispiel enthält einen div-Bereich, der mit Hilfe von Stylesheet-Angaben absolut positioniert wird. Wenn der Anwender mit der Maus in das Fenster klickt, wird der Bereich an die Position verschoben, an der der Mausklick erfolgt. Der div-Bereich wird über document.getElementById() angesprochen, je nachdem, welches Objekt zur Verfügung steht.

Beachten Sie: Gehen Sie mit dem dargestellten Beispiel vorsichtig um. Es kann Ihnen passieren, dass der "Layer" sich über wichtige andere Seitenbestandteile schiebt und dadurch Verweise zu anderen Seiten eventuell überdeckt werden.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML