✔ window.event leer

Warper

Warper

Erfahrenes Mitglied
Hi

hab folgenden Quelltext mit Hilfe eines Buches, eines SelfHTML Beispiels und hiesigem Forum geschrieben. Leider habe ich bei allen Versuchen immer das selbe Problem, welches wahrscheinlich ganz einfach zu lösen ist. Undzwar scheitern alle meine Versuche daran, dass window.event irgendwie keine Eigenschaften hat.

Hier der gesamte Quelltext meiner Testseite:

HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
    <title>New document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <script type="text/javascript">

    function showInfoBox () {
        var distX;
        var distY;

        distX = (window.event)? window.event.clientX : window.event.pageX;
        distY = (window.event)? window.event.clientY : window.event.pageY;

        alert("X: "+distX);

        if (document.getElementById) {
        document.getElementById("info_box").style.left  = distX + "px";
        document.getElementById("info_box").style.top = distY + "px";
        document.getElementById("info_box").style.display = "block";
        } else if (document.all) {
        document.all.info_box.style.left = distX + "px";
        document.all.info_box.style.top = distY + "px";
        document.all.info_box.style.display = "block";
        }
    }

    </script>

</head>
<body>

<div id="info_box" style="width: 200px; height: 100px; background-color: #000; position: absolute; display: none;"></div>

<div id="link_box" onmousemove="javascript:showInfoBox()" style="display: block; height: 100px; width: 100px; margin-top: 300px; margin-left: 300px; border: 2px solid #000;"></div>

</body>
</html>

Vielleicht könnt ihr mich ja auf den richtigen weg bringen ;)

Grüße,
Steffen
 
"window.event" existiert nur im InternetExplorer.

So sollte es überall hinhauen:
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
    <title>New document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <script type="text/javascript">

    function showInfoBox (e) {
        var distX;
        var distY;

        distX = (window.event)? e.clientX : e.pageX;
        distY = (window.event)? e.clientY : e.pageY;

        alert("X: "+distX);

        if (document.getElementById) {
        document.getElementById("info_box").style.left  = distX + "px";
        document.getElementById("info_box").style.top = distY + "px";
        document.getElementById("info_box").style.display = "block";
        } else if (document.all) {
        document.all.info_box.style.left = distX + "px";
        document.all.info_box.style.top = distY + "px";
        document.all.info_box.style.display = "block";
        }
    }

    </script>

</head>
<body>

<div id="info_box" style="width: 200px; height: 100px; background-color: #000; position: absolute; display: none;"></div>

<div id="link_box" onmousemove="showInfoBox(event)" style="display: block; height: 100px; width: 100px; margin-top: 300px; margin-left: 300px; border: 2px solid #000;"></div>

</body>
</html>
....wie du dort siehst, wird der Funktion über das Schlüsselwort "event" das Event-Objekt direkt beim Aufruf übergeben.
 
Cool danke, endlich habe ich es (fast) komplett verstanden. Nur die "oder" Syntax bei der distX und distY Zuweisung ist mir noch ein Rätsel. Das werde ich mir aber anlesen.

Danke,
Steffen
 
Diese oder-Syntax stellt nur eine Browserweiche dar.

Es wird damit geprüft, ob ein IE am Werk ist, wenn ja wird bspw. distX die Eigenschaft clientX des Event-Objektes zugewiesen, wenn nicht, dann die Eigenschaft pageX.

Man könnte da bspw. auch schreiben
Code: 
distX = (document.all)? e.clientX : e.pageX;
...käme aufs gleiche heraus.

Die Syntax solcher Bedingungen ist prinzipiell so aufgebaut:
Code: 
objekt=(bedingung_erfüllt) ? bedingungerfüllt_wert : bedingungnichterfüllt_wert;

...somit eine kürzere Variante von
Code: 
if(bedingung_erfüllt)
  {
    objekt=bedingungerfüllt_wert;
  }
else
  {
    objekt=bedingungnichterfüllt_wert;
  }
 
Wow, cool danke! Jetzt ist alles klar.

Hier meine aktuelle Version:

Code: 
function showInfoBox (boxId, e) {
    var distX;
    var distY;

    if (window.event) {
        distX = e.clientX;
        distY = e.clientY;
    } else {
        distX = e.pageX;
        distY = e.pageY;
    }

    if (document.getElementById) {
    document.getElementById(boxId).style.left  = distX + 20 +"px";
    document.getElementById(boxId).style.top = distY - 70 +"px";
    document.getElementById(boxId).style.display = "block";
    } else if (document.all) {
    document.all.boxId.style.left = distX + "px";
    document.all.boxId.style.top = distY + "px";
    document.all.boxId.style.display = "block";
    }
}

function hideInfoBox (boxId) {
    if (document.getElementById) {
    document.getElementById(boxId).style.display = "none";
    } else if (document.all) {
    document.all.boxId.style.display = "none";
    }
}

Leider bezieht der IE bei clientX nicht das scrollen mit ein :( Die Infobox erscheint also immer um die Scrollweite verschoben. Hat jemand eine Idee?

Grüße
 
Addiere das Scrollen einfach noch dazu:

Code: 
if (document.all && !document.captureEvents) {
        var docEl = (
                    typeof document.compatMode != "undefined" && 
                     document.compatMode        != "BackCompat"
                ) ? "documentElement" : "body";

        blaX    += document[docEl].scrollLeft;
        blaY    += document[docEl].scrollTop;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück