Montag, 6. Juni 2011
Abfragen der Koordinaten der Mouse
Die Abfrage der Koordinaten ist nicht trivial.
Das größte Problem ist wieder einmal die Cross-Browser-Kompatibilität.
Das größte Problem ist wieder einmal die Cross-Browser-Kompatibilität.
Anbei ein Beispiel, dass genau dieses Problem löst.
Es läuft in allen gängigen Browsern.
 <!DOCTYPE html> <!-- damit die Seite als html5 interpretiert wird -->
<html>
<head>
  <!-- charset UTF-8 damit auch Umlaute und Sonderzeichen funktionieren -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- minimale jquery lib wird über ein CDN geladen - es muß eine Internetverbindung bestehen.-->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
  <div id="div2" style="background-color: greenyellow; width: 500px; height: 500px"> Maus bewegen</div>
  <div> Dieser Code läuft im IE 7, Firefox und im Google Chrome.</div>
  <div id="div3" style="background-color: bisque"></div>
  <script type="text/javascript">
    //div2 ist somit ein jquery element => neue jquery methoden   
    //referenz, damit der selektor nicht mehrmals ausgeführt wird.
    var div2 = $("#div2");
    div2.bind("mousemove", function(e) {
      //div2.offset() funktioniert nur, da durch jquery bereit gestellt.
      $("#div3").html("X:"+ (e.screenX - div2.offset().left) +"<br>" +
              "Y:"+ (e.pageY -div2.offset().top) + "<br>" +
              "e.screenX"+e.screenX + "<br>" +
              "e.screenY:"+ e.screenY);
    } , false);
  </script>
</body>
</html>
Abonnieren
Kommentare (Atom)