event-handling problem bei Javascript generiertem XHTML und CSS

[Antipitch]

Hi Leute,
ich generiere in'ner externen Javascript Datei folgenden Code (Menü für 'ne Flash Weiche; hier mal nur ein Navigationspunkt; styling der XHTML/ PHP über externe CSS Datei):

document.write("<ul id="navlist">");
      document.write("<li><a href="#" id="nav01">Seite</a></li>");
document.write("</ul>");

Wird dann per Javascript in die PHP gerufen, läuft auch alles normal. Aber: Mit folgenden Funktionen (auch in der obigen Javascript-Datei) wollte ich sowohl für die UL im Hintergrund als auch für die HREFs mouseover-Effekte via CSS Hintergundbild-Verschiebung erreichen:

function setListBg(evt) {
list.style.backgroundPosition = "0 0";
single.style.backgroundPosition = "0 -15px";
}
function setSingleBg(evt) {
list.style.backgroundPosition = "0 0";
single.style.backgroundPosition = "0 -30px";
}
function clearListBg(evt) {
list.style.backgroundPosition = "0 -26px";
single.style.backgroundPosition = "0 0";
}
function init(){
list = document.getElementById("navlist");
single = document.getElementById("nav01");
list.onmouseover = setListBg;
single.onmouseover = setSingleBg;
list.onmouseout = clearListBg;
}
window.onload = init;

Die erste Funktion wird für beide Elemente ausgeführt, die zweite für die HREFs nicht mehr (jedenfalls nicht sichtbar). Die clear Funktion geht allerdings. Firefox Konsole keine Fehler. Vielleicht handelt es sich eigentlich um ein CSS- oder Laufzeitproblem? Bei nicht verschachtelten bzw. parent - child Boxen gibts keine Probleme. Falls jemand einen Fehler sieht oder 'ne elegantere Lösung hat... Wär sehr nett!

Gruß
Antipitch

[plan_B]

Hallo,

ich nehme mal an, du hast noch nicht an das event-bubbling gedacht.

beende die Funktionen mit return false;

Gruß plan_B

[Antipitch]

Hallo,

ich nehme mal an, du hast noch nicht an das event-bubbling gedacht.

beende die Funktionen mit return false;

Gruß plan_B

Hi plan_B,
doch hatte ich und return false auch probiert. Hat aber nichts gebracht. Aber sehr schön, dass du das nochmal gesagt hat. Hab da nochmal nachgeforscht und beende und lösche die events jetzt explizit mit eigenen Funktionen. Dank dir und wen's interessiert: code siehe unten...

Gruß
Antipitch

function cancelEvent(e) {
    if (!e) e = window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}
function stopEvent(e) {
    if (!e) e = window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
}
function setListBg(e) {
list.style.backgroundPosition = "0 0";
single.style.backgroundPosition = "0 -15px";
cancelEvent(e);
stopEvent(e);
}
function setSingleBg(e) {
list.style.backgroundPosition = "0 0";
single.style.backgroundPosition = "0 -30px";
cancelEvent(e);
stopEvent(e);
}

[plan_B]

Hallo,

jetzt habe ich mich auch schlau gemacht und ein wenig getestet.
Allerdings ist mir die Notwendigkeit deiner Funktion cancelEvent() nicht klar geworden. Bei welchem Browser ist das nötig?

if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }

Gruß plan_B

[molily]

Hallo,

Events im Dokument lösen eine Standard-Behandlung aus. Das ist bei den meisten Elementen bei den meisten Events gar keine. Es passiert bspw. nichts, wenn du irgendwo ins Dokument klickst. Der Event läuft dann den DOM-Baum rauf und runter, aber kein Handler wird aktiv, dann wird die Standard-Ereignisbehandlung vom Browser gestartet. Bei einem div-Element ist das: Tue nichts. Bei einem a-Hyperlink: Navigiere die Zieladresse an.

http://www.quirksmode.org/js/events_early.html#link4
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-cancelation
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault

Musst du also bei einem Klick auf ein div-Element die Standard-Ereignisbehandlung überhaupt unterdrücken? Nein. Du kannst den Teil einfach weglassen.

Mathias

[plan_B]

danke Mathias,

Events im Dokument lösen  ...

für die ausführliche Erklärung. Du machst dir immer viel Arbeit mit deinen Antworten, aber dafür ist es dann auch verständlich.

danke auch an Antipitch

Gruß plan_B

[Antipitch]

Hi plan_B,

molily hat's ja eigentlich schon beantwortet.

Auf die Lösung war ich auf http://ajaxcookbook.org/canceling-and-stopping-browser-events/ von Bret Taylor gestoßen und hatte erstmal beide Funktionen eingebunden. Die cancel Funktion ist aber in diesem Fall nicht nötig, hast du richtig überlegt.

Gruß
Antipitch