[DHTML] event handling, alles werkt, IE geeft err. Moz niet.

[Verwijderd]

Korte introductie: Ik ben een pulldown aan het coden die IE/Mozilla compatible moet zijn. De gegevens van de pulldown worden uit een aantal arrays gehaald waarna alle items dynamisch gegenereerd worden. Daarbij wordt een Array bijgehouden ('bfh_menuItemArray[id]') waarbij 'id' de id is van de DIV die in de pagina staat. Al die bfh_menuItemArray[id]'s zijn objecten die als property hebben een action, een rollover cssClass etc.

Het vreemde probleem dat ik tegenkom is dit: de onmousedown van de menuitems verwijst naar een functie 'bfh_menuMouseDown':

JavaScript:

function bfh_menuMouseDown(e) {
    var el1 = (e)?e.target:window.event.srcElement;
    var el1_1stP = bfh_1stParentDiv(el1);

    // assignen gaat prima, of ik nou id, nodeName doe whatever.
    var myVar = el1_1stP.id; 
    
    // hier gooit ie een error, maar alert wel de juiste ID, (IE dus)
    alert(myVar);

    // gaat weer prima
    var myId = el1_1stP.id; 

    bfh_hideMenus();
    
    // IE voert de actie uit maar geeft wel weer een error.
    eval(bfh_menuItemArray[myId].action); 
}

In mozilla geen enkele error, alles werkt prima. In IE werkt alles ook prima, hij geeft de juiste alert, hij voert action uit die bij het object hoort, allemaal fijn, maar.... hij geeft wel een error: Object required.

De functie 'bfh_1stParentDiv' gaat omhoog in de documentstructuur totdat ie een DIV tegenkomt. Doel is om te zorgen dat in de menuItems bijvoorbeeld ook een image met een id geplaatst kan worden.

JavaScript:

function bfh_1stParentDiv(node) {
    if (node.nodeName=='DIV') return node;
    while (node.parentNode) {
        node = node.parentNode;
        if (node.nodeName=='DIV') return node;
    }
}

Ik heb ff geen idee waarom IE een error geeft, zeker aangezien Mozilla geen errors geeft en de functie in IE verder wel correct uitgevoerd wordt... Iemand suggesties?

IE versie: 5.50.4807.2300

[r0bert]

suggestie: zet even een paginaatje online

edit:
stuur anders maar even toe via mail, zet ik het wel eventjes online..

[Verwijderd]

ja, da's een goeie, maar deze barbaar heeft nog geen eigen webspace, wordt aan gewerkt.

Zal eens kijken of ik wat kan regelen....

[Hangloozz]

die eval() gaat wat stokslagen van crisp opleveren

[Verwijderd]

stokslagen? ouch

ok, een en ander staat online op www.interkontakt.com/temp_got/

over die eval, netjes is anders idd. Wellicht is het ook niet nodig als ik alleen locaties ga opgeven in de bfh_menuItemArray[myId].action maar is er een nettere manier om iets met willekeurige js-code te doen?

[Annie]

IE6 geeft andere foutmeldingen dan jij vermeldt.

1e link >> geeft alert met javascript source (werkt dus neem ik aan)
2e link >> Error: 'className' is null or not an object (line 47)
3e link >> Error: 'bfh_defaultDivStyle' is undefined (line 363)

[joostje]

IE6 geeft hier helemaal geen foutmeldingen hoor....

[crisp]

* crisp krijgt alleen een 404

Edit: is misschien de DNS van XS4ALL door de war?

[Verwijderd]

Ik krijg een foutmelding op linennr 346.
Het moet betekenen dat de functie bfh_1stParentDiv geen node binnenkrijgt, omdat hij zegt: Object vereist. Hoe dat kan, geeeeeeeeeen idee.
Het zou iig betekenen dat el1 geen object is (wat vreemd is, maar goed want window.event.srcElement zou toch een element moeten geven).
Probeer anders eens een alert(typeof el1);

[Verwijderd]

zou best kunnen dat DNS van xs4all het niet doet, zusje in A'dam kon interkontakt.com ook niet bereiken.

Ik heb van alles zitten proberen maar wat er nou precies fout gaat en vooral waarom is me nog steeds niet duidelijk. Die alert doet iig moeilijk evenals die eval. Als ik hem aanpas naar het volgende:

JavaScript:

function bfh_menuMouseDown(e) {
    var el1 = (e)?e.target:window.event.srcElement;
    if (window.event) window.event.cancelBubble = true;
    var el1_1stP = bfh_1stParentDiv(el1);
    var myId = el1_1stP.id;
//  eval(bfh_menuItemArray[myId].action);
    test3(myId);
    alert(typeof myId);
    bfh_hideMenus();
}

...ben ik van die error af. test3() doet niks anders dan een variabele zetten die ik dmv klikken op een link check. De wijze waarop ik menu-'actions' ga laten uitvoeren staat nog niet precies vast dus kan ik, dit wetende, waarschijnlijk wel om het probleem heen werken. (scheelt meteen weer stokslagen )

Maar eigenlijk wil ik gewoon weten wat er fout gaat. Een alert in deze functie:

JavaScript:

function bfh_menuMouseOut(e) {
    var el1 = (e)?e.target:window.event.fromElement;
    var el2 = (e)?e.relatedTarget:window.event.toElement;
    var el1_1stP = bfh_1stParentDiv(el1);
    var el2_1stP = bfh_1stParentDiv(el2);
    if (el1_1stP==el2_1stP) return; 
            //prevent textNodes or subelmnts from firing event
    var myId = el1_1stP.id;
    alert(myId);
    bfh_getObj(myId).className = bfh_menuItemArray[myId].cssClass;
    bfh_closeTimer = setTimeout('bfh_hideMenus()',bfh_menuTimeOut);
        bfh_closeTimerActive = true;
}

... levert namelijk geen error op.

[Verwijderd]

Ik zat even te denken, maar deze functie:

PHP:

function bfh_1stParentDiv(node) {
    if (node.nodeName=='DIV') return node;
    while (node.parentNode) {
        node = node.parentNode;
        if (node.nodeName=='DIV') return node;
    }
}

heeft een potentieel probleem, nl als hij geen DIV tegenkomt, blijft hij lopen, en dan krijgt hij iig een foutmelding.
Het zou misschien iets te maken kunnen hebben met jouw problemen in IE (maar ja, misschien ook niet).

[drm]

Verwijderd schreef op 23 oktober 2002 @ 06:26:
Ik zat even te denken, maar deze functie:

PHP:

function bfh_1stParentDiv(node) {
    if (node.nodeName=='DIV') return node;
    while (node.parentNode) {
        node = node.parentNode;
        if (node.nodeName=='DIV') return node;
    }
}

heeft een potentieel probleem, nl als hij geen DIV tegenkomt, blijft hij lopen, en dan krijgt hij iig een foutmelding.
Het zou misschien iets te maken kunnen hebben met jouw problemen in IE (maar ja, misschien ook niet).

Ik ga voor de "misschien ook niet". De while geeft namelijk aan dat hij moet blijven lopen zolang er parentNode's zijn. Dus hij stopt bij het root element en geeft dan niets terug.

[Verwijderd]

Oops, klopt ja, als er geen parentNode is, dan geeft hij null.
Blijft wel een vaag probleem hoor dit. Ik geloof dat ik het maar opgeef.
In de nieuwste builds van Mozilla, blijft de betreffende site trouwens zwart.

[Verwijderd]

die check op parentNode zou in theorie zelfs weg kunnen blijven aangezien de bfh_menuMouseDown alleen op menuItems gezet wordt.

Ik heb nog wat zitten prutsen en het lijkt er haast op alsof het een soort bug is in IE. Elke alert geeft een error of ik nou gebruik maak van een variabele of niet. Als ik de alert timeout (en de event-handling functie klaar is) krijg ik geen error. De variabele passen naar test3() levert hetzelfde verhaal op, als ik daar meteen een alert geef krijg ik een error, als ik hem timeout niet.

De bevindingen op een rij (bfh.js):

PHP:

var tempVar = '';

function bfh_menuMouseDown(e) {
    var el1 = (e)?e.target:window.event.srcElement;
    if (window.event) window.event.cancelBubble = true;
    var el1_1stP = bfh_1stParentDiv(el1);
    var myId = el1_1stP.id;
    test3(myId);
    bfh_hideMenus();
//  alert('hatseflats'); // werkt, error: 'Object required'
    dieMsScum = setTimeout('alert("hatseflats")',1000); // werkt, geen error
//  dieMsScum = setTimeout('alert(myId)',1000); // werkt niet, myId is undefined.
//  dieMsScum = setTimeout('alert(tempVar)',1000); // werkt, geen error
//  alert(tempVar); // werkt wel, error: 'Object required'
}

index.html:

PHP:

function test3(myVar) {
    tempVar = 'func executed, id='+myVar;
    alert(tempVar); // werkt, error 'Object required'
//  dieMsScum = setTimeout('alert(tempVar)',1000); //werkt, geen error
}

Iemand een verklaring hiervoor? Bug zou kunnen (en scheelt mij weer hoofdbrekens ) maar een vriend van me had de error ook in IE6 dus dan zit ie er daar nog steeds in.

Martijn22: Geeft die moz-build nog een error? Klinkt vaag, ik draai hier Mozilla 1.1. Ik weet niet wat doorgaans de kwaliteit van die builds is en of ik daar nu veel conclusies aan moet verbinden.....

[Verwijderd]

De build geeft geen error. Misschien moet je er inderdaad geen conclusies aan verbinden, aangezien het nog een beta is (is wel een slecht voorteken).

Misschien is dat andere inderdaad wel een bug van IE. Weet iemand toevallig een goede site met alle bugs van IE?

[drm]

Die laatste functie test3() geeft bij mij geen fout in IE6, hoor

[Verwijderd]

zoals ie in bovenstaande stukje staat geeft ie bij mij idd een error hoewel hij wel een alert geeft met de id van de DIV waar op geklikt is.

Ik heb nu onder www.interkontakt.com/temp_got_v2/ een versie gezet die de alert met een timeout geeft. (var wordt naar test3() gepast en daar wordt de alert met een timeout gegeven) Dat geeft bij mij in IE geen error...

PHP:

function test3(myVar) {
    tempVar = 'func executed, id='+myVar;
//  alert(tempVar); // werkt, error 'Object required'
    dieMsScum = setTimeout('alert(tempVar)',1000); //werkt, geen error
}

Het gele uitroeptekentje lijkt dus te voorkomen, maar snappen waarom....

[Morrar]

Als je alle code in een bestand cut 'n paste zie je dat niet de alert een prob veroorzaakt maar de bfh_1stParentDiv(node) functie. Deze regel choked ie op bij mij (IE6):

if (node.nodeName=='DIV') return node;

Kennelijk wordt de functie een keer aangeroepen met een verkeerde node of zoiets... Ik ga nog wel ff verder spitten...

edit:

Ow ja... de error wordt trouwens getriggerd niet zozeer door de alert als wel doordat deze de focus van de div afhaalt, en deze dus gaat hiden etc... Als je top.status gebruikt loopt het als een trein...

Verder zou ik zeggen: je code kan wel wat cleaning gebruiken ... En dit moet eenvoudiger kunnen zou ik willen zweren...

Tenlotte: ik krijg PHP code in mijn HTML mee!! (include "source/colors.php";)

[Morrar]

Ok... duurde ff, maar de fout zit als volg in elkaar: De alert zorgt ervoor dat het menu een mouseout krijgt, echter IE geeft hier ffies geen "toElement" mee. Deze wordt dan dus null en vervolgens choked bfh_1stParentDiv(node) erop, want er is geen nodeName attribuut in null.

Als je dan de alert wegklikt wordt de mouseover functie aangeroepen (waarom zou je je af kunne vragen maja) maar opnieuw geeft de alert-box zichzelf niet mee. el2, oftewel het "fromElement" is dus weer null, en dus heeft het geen nodeName...

De alert-box vern**kt zullen we maar subtiel zeggen de event-handling structuur een beetje Met een timeout werkt het wel omdat de alert dan pas komt als de events hun werk hebben gedaan. Of dit een IE bug is of niet daar kun je over discuseren, netjes is het in ieder geval niet.

Met deze code kun je het debuggen wat makkelijken maken:

JavaScript:

function bfh_menuMouseOver(e) {
    var el1 = (e)?e.target:window.event.toElement;
    var el2 = (e)?e.relatedTarget:window.event.fromElement;
    top.status += " | overEl2=" + el2;
        // ^== let op de null in de statusbar!
    
        var el1_1stP = bfh_1stParentDiv(el1);
    var el2_1stP = bfh_1stParentDiv(el2);
    if(el1_1stP==el2_1stP) return;
        //prevent textNodes or subelmnts from firing event
    
        var myId = el1_1stP.id;
    bfh_getObj(myId).className = bfh_menuItemArray[myId].cssClass_ro;
    if (bfh_closeTimerActive) clearTimeout(bfh_closeTimer);
        bfh_closeTimerActive=false;
}

function bfh_menuMouseOut(e) {
    var el1 = (e)?e.target:window.event.fromElement;
    var el2 = (e)?e.relatedTarget:window.event.toElement;
    top.status += " | outEl2=" + el2;
        // ^== let op de null in de statusbar!
    
        var el1_1stP = bfh_1stParentDiv(el1);
    var el2_1stP = bfh_1stParentDiv(el2);
    if(el1_1stP==el2_1stP) return;
        //prevent textNodes or subelmnts from firing event
    
        var myId = el1_1stP.id;
    bfh_getObj(myId).className = bfh_menuItemArray[myId].cssClass;
    bfh_closeTimer = setTimeout('bfh_hideMenus()',bfh_menuTimeOut);
        bfh_closeTimerActive = true;
}

edit:

Geprobeerd layout een beetje te redden

[Verwijderd]

thx Morrar! Geloof dat met je verklaring het probleem wel goed omschreven is.

Ik had me nog niet echt gericht op de functies van de mouseOver/-Out events. Blijkt het hem daar dus in te zitten. Ik had nog wat zitten controleren met een counter om te checken hoevaak bfh_1stParentDiv() aangeroepen wordt.

iig weer wat geleerd, zoals oa het gebruik van top.status ipv alert().

offtopic:
zal mijn code idd is gaan cleanen, het is ondertussen een zooitje. En die php maar ff negeren, vergeten er uit te halen....