[JS] event.toElement cross browser maken

[martdj]

Hoi allemaal,
Ik ben bezig om een applicatie voor meer browsers te laten werken dan alleen IE. Daarvoor moet ik de code van mijn op IE gerichte collega aanpassen en ik kom één stukje tegen waar ik niet uitkom en waarvan ik hoop dat jullie kunnen helpen.
Het gaat om de volgende code:

code:

function mOut( object, className) {
    // OnMouseOut event - control the object that is currently being handled
    // Parameter(s):    object      - object currently being handled
    //      className   - new class style for object

    if ( object != null)
    {   if (!object.contains( event.toElement))
        {   var strClass = new String( object.className).toUpperCase();
            if ( strClass.indexOf( 'ACTIVE') < 0) 
            {   object.style.cursor = 'default';
                object.className = className;
            } // if
        } // if
    } // if
} // function

De code gaat momenteel op Firefox mis op het event.toElement stuk aangezien window.event binnen Firefox niet wordt ondersteund. Ik heb geprobeerd dit werkend te krijgen met deze code:

code:

function mOut( object, className, e ) {
    // OnMouseOut event - control the object that is currently being handled
    // Parameter(s):    object      - object currently being handled
    //      className   - new class style for object
    var relTarg;
    if (!e) var e = window.event;
    if (e.relatedTarget) relTarg = e.relatedTarget;
    else if (e.toElement) relTarg = e.toElement;
    if ( object != null)
    {   if (!object.contains( relTarg))
        {   var strClass = new String( object.className).toUpperCase();
            if ( strClass.indexOf( 'ACTIVE') < 0) 
            {   object.style.cursor = 'default';
                object.className = className;
            } // if
        } // if
    } // if
} // function

Deze code werkt nog steeds goed in IE, maar helaas nog steeds niet in Firefox. Ik geef het "event" verkeerd door aan de functie, maar ik weet niet niet hoe het wel moet. De functie aanroep is overanderd en heeft dus twee argumenten.

[ Voor 3% gewijzigd door martdj op 19-01-2006 15:14 ]

[crisp]

Hoe word de handler toegekent? Heb je eventueel een werkend voorbeeld?
Wellicht is dit een overweging; je kan dan namelijk eenvoudig met het 'this' keyword werken binnen je functies.

[ Voor 10% gewijzigd door crisp op 19-01-2006 15:27 ]

[martdj]

De handler gebeurd vanuit HTML die in JavaScript is opgebouwd. Voorbeeld:

code:

'<TR valign="top">';
    html_table += '<TD class="linkActions" ID="ROW_' + intRow + '" ' +
                                 'onmouseover="mOver(this,' + "'linkActionsMO'" + ');" ' +
                                  'onmouseout="mOut(this,' + "'linkActions'" + ');" ' +
                                 'onclick="changeActiveRow(' + intRow + ');openNavLink(' + "'" + strItemType + "'" + ', ' + "'" + strItemLink + "'" + ', ' + "'FrameBody'" + ');">' +
                                 '[img]"NAVITEM.GIF">&nbsp;&nbsp;'[/img]';
            html_table += '</TR>';

Uiteindelijk krijg je dus een aanroep als mOut(this,stijlnaam)

Ik zit binnen bij een bedrijf en kan helaas geen code op Internet plaatsen vanaf hier.

[crisp]

Ik vraag me af of je die toElement ueberhaupt wel nodig hebt en vermoed dat dit ook al goed zal werken:

JavaScript:

function mOut(object, className)
{
    if (object && object.className.toUpperCase().indexOf('ACTIVE' < 0))
    {
        object.style.cursor = 'default';
        object.className = className;
    }
}

[martdj]

Je hebt gelijk. Hij kon er inderdaad wel uit. De check was denk ik bedoeld voor het geval iemand met een hele vage muisbeweging het voor elkaar kreeg een mouseout op het object te creëren en toch voor JavaScript het door had weer boven het object te staan, maar de kans dat dat gebeurt is verwaarloosbaar.
Ik hou wel de splitsing tussen de test op object en object.className erin. Als je geen object hebt, bestaat object.className niet en krijg je een JS error als ze in dezelfde regel gecheckt worden.
Bedankt!

[ Voor 5% gewijzigd door martdj op 20-01-2006 12:59 ]

[crisp]

martdj schreef op vrijdag 20 januari 2006 @ 12:58:
Ik hou wel de splitsing tussen de test op object en object.className erin. Als je geen object hebt, bestaat object.className niet en krijg je een JS error als ze in dezelfde regel gecheckt worden.

Nee hoor; als object niet bestaat wordt de rest van de evaluatie niet uitgevoerd