peter: Mausposition, clientX, Safari und Fehler im IE

Hallo Forum,

Ich benötige zur Realisierung eines Projektes die Mausposition relativ zur linken oberen Ecke des aktuellen Fensters.
Dazu benutze ich: event.clientX bzw. Y.
Laufen soll das ganze auf IE ab 5.0, NS ab 7.0, Opera(neuere) und dem neuen Safari.

Zum Austesten hab ich mal folgende Testseite geschrieben:
(zum Anschauen: http://www.antikmodell.de/test.html)

**********************************
**********************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><head><title>Test</title></head>

<body style="width:100%;height:90%;margin:0px;padding:0px;cursor:crosshair;">

<div style="position:absolute; left:50px; top:50px; width:3000px; height:2220px; background-color:#FFBF00;margin:0px;padding:0px;">
</div>

</body>

<script type="text/javascript">

function coords(e)
{e=(!e)?window.event:e;
window.status=e.clientX+" / "+e.clientY;}

document.body.onmousemove=coords;

</script>

</html>

**********************************
**********************************

Das funktioniert auch auf Opera und NS, im IE funktionierts fast genau.

Wenn weder nach links und rechts gescrollt ist und ich den Cursor auf die linke obere Ecke des gelben DIVs bewege, zeigen Opera und NS genau die 50 Pixel von oben und rechts in der Statuszeile an, auf denen das DIV auch sitzt.

Der IE zeigt 52/52 Pixel an!!!!!!!!!!!!!!!

Alle drei zeigen auch wenn gescrollt ist 0/0 (IE 2/2) Pixel an, wenn ich den Cursor in die linke obere Ecke bewege.

Soweit also alles wie geplant (bis auf die 2 Pixel Unterschied im IE, mit denen ich aber leben kann).

Leider hab ich keinen Mac zum testen, muß dann jedesmal zu nem Kumpel.

Wäre nett, wenn das mal jemand auf nem neuen Safari austesten könnte.
Vor allem ist dabei interressant, ob der das auch korrekt macht, wenn nach rechts und unten gescrollt ist. Zeigt der die Position dann auch relativ zur oberen linken Ecke des Fensters?
Ist also in der oberen linken Ecke dann noch 0/0?

Interresant wäre natürlich auch, wie andere Browser als die vorgenannten damit umgehen, bzw. welche Fehler auftreten.

Für eure Hilfe vielen Dank im Voraus

grüße
peter

  1. Hallo,

    Wenn weder nach links und rechts gescrollt ist und ich den Cursor auf die linke obere Ecke des gelben DIVs bewege, zeigen Opera und NS genau die 50 Pixel von oben und rechts in der Statuszeile an, auf denen das DIV auch sitzt.

    Der IE zeigt 52/52 Pixel an!!!!!!!!!!!!!!!

    Hast du einmal border-style für body und eventuell html auf »none« gesetzt (bzw. border-width:0)?

    Mathias

    1. Hallo Mathias,

      Der IE zeigt 52/52 Pixel an!!!!!!!!!!!!!!!

      Hast du einmal border-style für body und eventuell html auf »none« gesetzt (bzw. border-width:0)?

      Danke für den Tip, mit "border-width:0px;" im body zeigt mir der IE jetzt auch die korrekten Werte an.

      gruß
      peter

      1. Wenn ich ganz nach rechts scrolle und dann mit dem Kreuz in das linkere, obere Eck gehe, zeigt er mit 2000,0 ungefähr an.

        OSX 10.3.5, Safari

        Ingo B

        1. Hi Ingo,

          vielen Dank für deine Antwort.

          Wenn ich ganz nach rechts scrolle und dann mit dem Kreuz in das linkere, obere Eck gehe, zeigt er mit 2000,0 ungefähr an.

          »»

          OSX 10.3.5, Safari

          Das ist genau das, was ich befürchtet hatte.
          Der Safari macht hier also etwas ganz anderes als er sollte.

          W3C:
          *******************
          clientX
          -of type long, readonly
          -The horizontal coordinate at which the event occurred relative to the DOM implementation's client area.
          *******************

          Eigentlich sollte clientX/clientY die Position relativ zum Anzeigebereich zurückgeben.
          Das ist im IE, NS und Opera auch der Fall.
          Der Safari gibt nun aber die Position relativ zur Seite zurück (vergleichbar mit NS: pageX/pageY).

          Bei Apple (http://developer.apple.com/internet/webcontent/index.html) kann ich keine vernünftige Dokumentation finden.
          Da find ich lediglich ein paar ganz witzige Scriptbeispiele, ansonsten nur Verweise zum W3C.
          Die helfen mir natürlich auch nicht wirklich weiter, wenn sich die Äpfel nicht dran halten!

          ***************************
          Lösungsansatz 1:

          if(SAFARI)
          {
          alert('safari is sch... programmiert, der kann das nicht was ich will. kauf dir n anderes betriebssystem......');
          window.close();
          }

          ......ist natürlich nicht zufriedenstellend.
          ***************************

          Eine Abfrage, obs der Safari ist und dann das "scrollx"/"scrolly" abziehen ist auch nicht wirklich zufriedenstellend.
          Dann käm ja wieder alles durcheinander, wenn der Safari das vielleicht irgendwann mal richtig macht.

          Wichtig wäre für mich trotzdem zunächst mal zu wissen, wie ich zuverlässig herausfinden kann ob der Anwender den Safari benutzt.

          Werd hier mal drüber grübeln, wie ich bei meinem Projekt damit umgehen kann.

          Falls ihr irgendwelche Ideen habt, bin ich für Anregungen jederzeit dankbar.

          gruß
          peter

          1. Hallo,

            Der Safari gibt nun aber die Position relativ zur Seite zurück (vergleichbar mit NS: pageX/pageY).

            Bei Apple (http://developer.apple.com/internet/webcontent/index.html) kann ich keine vernünftige Dokumentation finden.

            Das ist z.B. hier dokumentiert http://www.quirksmode.org/dom/w3c_events.html#mousepos.

            Eine Abfrage, obs der Safari ist und dann das "scrollx"/"scrolly" abziehen ist auch nicht wirklich zufriedenstellend.

            Da wird dir wohl nichts anders übrig bleiben.

            Dann käm ja wieder alles durcheinander, wenn der Safari das vielleicht irgendwann mal richtig macht.
            Wichtig wäre für mich trotzdem zunächst mal zu wissen, wie ich zuverlässig herausfinden kann ob der Anwender den Safari benutzt.

            Daher brauchst du eine sinnvolle Abfrage, die nicht überprüft, ob der Browser Safari ist, sondern überprüft, ob clientX gleich pageX ist (also nicht kleiner als pageX), wenn scrollLeft größer als 0 ist. Nur dann musst scrollLeft vom clientX abziehen. (Dasselbe für die y-Achse.)

            Mathias

            1. Hallo Mathias

              Das ist z.B. hier dokumentiert http://www.quirksmode.org/dom/w3c_events.html#mousepos.

              Danke, das hilft wirklich weiter.

              Daher brauchst du eine sinnvolle Abfrage, die nicht überprüft, ob der Browser Safari ist, sondern überprüft, ob clientX gleich pageX ist (also nicht kleiner als pageX), wenn scrollLeft größer als 0 ist. Nur dann musst scrollLeft vom clientX abziehen. (Dasselbe für die y-Achse.)

              Genau so hatt ich mir das auch vorgestellt, nur gibts beim W3C kein pageX/Y. Da sich apple immer auf das W3C bezieht hatte ich erwartet, daß es das pageX/Y dann auch im Safari nicht gibt. Obiger Link sagt etwas anderes aus. Das wär prima, wenn ich das tatsächlich verwenden könnte.

              Hab mir inzwischen auch schon n kleines Script gebastelt, das die ganzen mouseevent-Eigenschaften abfragt, die es beim W3C und in den verschiedenen Browsern so gibt.
              Morgen hab ich Gelegenheit, mir das mal auf nem Mac anzuschauen was der Safari da so ausspuckt.

              Vielen Dank nochmal für deine Hilfe und den prima Link.

              Gruß
              peter