Nina2: Fokus zweier Objekte

SELF-Forum

Fokus zweier Objekte

Nina2
– Informationen zu den Bewertungsregeln

Moin,

habe ein nerviges Problem, zur Veranschaulichung:
<div id="aussen" onmousedown="alert(this.id)">
 <div id="innen" onmousedown="alert(this.id)">
 </div>
</div>
Klickt man nun auf den den inneren DIV, so kommt auch wieder die alert-Meldung mit dem Text "aussen".
Allerdings hätte ich gerne ausschließlich die Meldung "innen", wenn auf die innere Box geklickt wird.
Bei Klick auf den äußeren DIV würde ich gerne "aussen" lesen.

(Wie) Ist das machbar?

Habe nun die ganze Nacht herumprobiert und wiedereinmal über die Events gelesen und kam doch keinen Schritt weiter :( bzw. fand keine Lösung, die für Firefox und IE funktionieren möchte.

Wisst ihr was dafür?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Fokus zweier Objekte

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    habe ein nerviges Problem, zur Veranschaulichung:
    <div id="aussen" onmousedown="alert(this.id)">
    <div id="innen" onmousedown="alert(this.id)">
    </div>
    </div>
    Klickt man nun auf den den inneren DIV, so kommt auch wieder die alert-Meldung mit dem Text "aussen".
    Allerdings hätte ich gerne ausschließlich die Meldung "innen", wenn auf die innere Box geklickt wird.
    Bei Klick auf den äußeren DIV würde ich gerne "aussen" lesen.

    (Wie) Ist das machbar?

    Dazu musst Du das Event bubbling unterbrechen. Ein Event steigt standardmäßig vom Element, welches ihn auslöst, durch den DOM-Baum bis zum Wurzelelement auf. In Deinem Fall löst der Mausklick auf dem DIV#innen auch einen Mausklick auf dem DIV#aussen und dann einen Mausklick auf dem Elternelement der DIVs aus usw. bis zum HTML-Element. Diese Aufsteigen des Events kann man unterbrechen. Natürlich nicht browserübergreifend einheitlich. Das wäre ja zu einfach ;-). Der MSIE kennt dafür event.cancelBubble. Mozilla kennt das neuerdings auch, siehe Gecko DOM Reference: event.cancelBubble. Es ist aber trotzdem empfehlenswerter, für standardkonforme Browser die DOM-Standardmethode zur Steuereung des Event bubbling einzusetzen. Das wäre Event.stopPropagation.

    Beispiel:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Stoppen des Event-Bubbling</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
#aussen { height:200px; width:500px; background-color:#f00; position:relative; }  
#innen { height:100px; width:400px; background-color:#0ff; position:absolute; top:50px; left:50px; }  
</style>  
<script type="text/javascript">  
<!--  
function reagiereAufEventUndLeiteIhnNichtWeiter(e) {  
 e = (e)?e:window.event;  
 if (e.stopPropagation) e.stopPropagation();  
 else if (e.cancelBubble === false) e.cancelBubble = true;  
  
 alert(this.id);  
}  
  
window.onload = function() {  
 document.getElementById("aussen").onmousedown = reagiereAufEventUndLeiteIhnNichtWeiter;  
 document.getElementById("innen").onmousedown = reagiereAufEventUndLeiteIhnNichtWeiter;  
}  
  
//-->  
</script>  
</head>  
<body>  
<div id="aussen">  
 <div id="innen">  
 </div>  
</div>  
</body>  
</html>

    Mit dem Codeblock

      
window.onload = function() {  
 document.getElementById("aussen").onmousedown = reagiereAufEventUndLeiteIhnNichtWeiter;  
 document.getElementById("innen").onmousedown = reagiereAufEventUndLeiteIhnNichtWeiter;  
}

    wird übrigens eine unaufdringlichere Methode zum Setzen der Eventhandler onmousedown eingesetzt. Hier benötigt man keine Attribute mehr im HTML-Code. Außerdem wird es hier einfacher, die Eventhandler so zu notieren, dass das Event-Objekt auch bei Standardkonformen Browsern mit übergeben wird.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Fokus zweier Objekte

      Nina2
      – Informationen zu den Bewertungsregeln

      Danke schön!

      wird übrigens eine unaufdringlichere Methode zum Setzen der Eventhandler onmousedown eingesetzt. Hier benötigt man keine Attribute mehr im HTML-Code. Außerdem wird es hier einfacher, die Eventhandler so zu notieren, dass das Event-Objekt auch bei Standardkonformen Browsern mit übergeben wird.

      Eine Frage noch hierzu: wie wäre es nicht komform bzw. was genau meinst du mit dem letzten Satz?
      Ist das this-Objekt im HTML onmousedown nicht standardkomform?
      Oder generell die Zuweisung von Events im <html-objekt>?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Fokus zweier Objekte

        Axel Richter
        – Informationen zu den Bewertungsregeln

        Hallo,

        wird übrigens eine unaufdringlichere Methode zum Setzen der Eventhandler onmousedown eingesetzt. Hier benötigt man keine Attribute mehr im HTML-Code. Außerdem wird es hier einfacher, die Eventhandler so zu notieren, dass das Event-Objekt auch bei Standardkonformen Browsern mit übergeben wird.
        Eine Frage noch hierzu: wie wäre es nicht komform bzw. was genau meinst du mit dem letzten Satz?
        Ist das this-Objekt im HTML onmousedown nicht standardkomform?

        Mit dem this-Objekt hat das nur indirekt zu tun. Es geht darum, dass einige Eventhandler-Funktionen das Event-Objekt auswerten bzw. manipulieren müssen. Dazu müssen sie aber Zugriff darauf haben. Im Microsoft IE ist das Event-Objekt immer als Eigenschaft des window-Objekts greifbar mit window.event. Das ist aber nicht Standard. In standardkonformen Browsern (Mozilla bspw.) wird das Event-Objekt automatisch der Eventhandler-Funktion als Parameter übergeben. Das ist der Parameter e in meiner Funktion reagiereAufEventUndLeiteIhnNichtWeiter(e).

        Mit der von mir gezeigten Methode der Zuweisung von Eventhandler-Funktionen via window.onload muss man die Eventhandler-Funktionen als Referenzen zuweisen. Man schreibt einfach:
        document.getElementById("aussen").onmousedown = reagiereAufEventUndLeiteIhnNichtWeiter;
        Parameter, welche die Funktion automatisch zugewiesen bekommt, müssen hier nicht notiert werden.

        Will man das selbe per HTML-Attribut machen muss man die Funktion als Funktionsaufruf (mit Klammern) schreiben:
        <div id="innen" onmousedown="reagiereAufEventUndLeiteIhnNichtWeiter()">
        Dabei werden aber nun grundsätzlich _keine_ Parameter übergeben, auch nicht automatisch das Event-Objekt. Es gibt dann sicherlich auch wieder Möglichkeiten da trotzdem ranzukommen. Dazu ist aber zusätzlicher Aufwand nötig.

        Auf das this hat das insoweit Einfluss, als this innerhalb der Eventhandler-Funktion im Fall
        document.getElementById("aussen").onmousedown = reagiereAufEventUndLeiteIhnNichtWeiter;
        auf das Objekt zeigt, welches den Event ausgelöst hat. Im Fall
        <div id="innen" onmousedown="reagiereAufEventUndLeiteIhnNichtWeiter()">
        zeigt this innerhalb der Eventhandler-Funktion auf das window-Objekt. Man kann dort also nicht einfach in der Funktion auf this.id zugreifen, sondern müsste das auch wieder als Parameter übergeben.

        Oder generell die Zuweisung von Events im <html-objekt>?

        Du meinst die Zuweisung von Events über HTML-Attribute wie in: <div id="innen" onclick="machwas()">? Nein, das ist nur nicht besonders schön und manchmal hinderlich, wie oben beschrieben. Die Eventhandler-Attribute sind aber durchaus im HTML-Standard enthalten.

        viele Grüße

        Axel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln