[javascript] Event problemen in IE7 (e.target)

[Sjoerd]

Ben bezig met een drag en drop scriptje te maken voor mijn website, alles werkt al perfect in FF maar helaas nog niet in IE.
Het stukje code dat roet in het eten gooit:

JavaScript:

var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
        
        //change the view of our div
        if(targ.className!='draggable'){return};
        targ.style.opacity='';
        targ.style.filter='';   
        targ.style.border='';
        targ.style.zIndex='';
        targ.style.background = '';

        //we give the cookie the div id as name
    setCookie(targ.id,targ.style.left,365);

het event stukje komt overigens rechtstreeks van
http://www.quirksmode.org/js/events_properties.html

Probleem in IE:
'nodeType' is leeg of geen object

Oke dan haal ik de safari fix weg echter krijg ik dan het volgende:
'className' is leeg of geen object

halen we die ook nog weg? je raad het al
'style' is leeg of geen object


Dit is echter lastig debuggen aangezien het in Firefox dus wel werkt, en dit copy paste werk is en ik dus geen idee heb waar de fout zou kunnen zitten, duidelijk is dat het object een fout geeft maar waardoor?...

[Sjoerd]

Subtiel kickje

[frickY]

Wat dacht je ervan dat je targ misschien niet goed gevuld is?
Probeer eens een window.alert(typeof(targ)); om te zien waar hij naar verwijst.

[Sjoerd]

Onder firefox geeft hij natuurlijk netjes object terug (het juiste object) in IE kom ik echter niet zo ver, voor de alert loop hij al vast, begrijpelijk

[Bozozo]

Klopt de functie definitie wel?

Dus
function somefunction(e) {
...
}

[f.v.b]

Sjoerd schreef op dinsdag 22 januari 2008 @ 21:45:
Onder firefox geeft hij natuurlijk netjes object terug (het juiste object) in IE kom ik echter niet zo ver, voor de alert loop hij al vast, begrijpelijk

Dan staat je alert(typeof(targ)); niet vroeg genoeg.

Ik vermoed ook dat targ niet gezet is. Mogelijk omdat window.event in deze context niet gezet is. Met wat goed geplaatste alerts moet dat in een paar minuten te achterhalen zijn.

Je eigen drag-drop code schrijven is lastig. Ben je uitgegaan van een werkend voorbeeld of doe je helemaal from scratch?

[frickY]

Het is overigens gebruikelijker om iets te doen als

JavaScript:

var e = e || window.event; // event object 
var targ = e.targ || window.event.srcElement; // event target 

Zie ook srcElement.value in firefox

[Sjoerd]

Ondertussen inderdaad maar

JavaScript:

    var e = e || window.event; // event object
        var targ = e.target || window.event.srcElement; // event target

Echter nog geen resultaat in ie...
object vereist... waar targ staat dus

Onder firefox werkt alles nog steeds probleemloos

[f.v.b]

Omdat event handling in IE en Firefox compleet verschillend is, werkt het in de ene browser wel, en in de andere browser niet. In Firefox wordt 'e' als argument aan de functie meegegeven. In IE moet je inplaats daarvan window.event gebruiken.

Zo te zien is window.event dus niet gezet. Dat betekent dat je de functie op het verkeerde moment aanroept. Dat is dus niet te debuggen door alleen naar de code binnen de functie te kijken.

Wat heb je zelf allemaal gedaan om dit te debuggen? Ik heb namelijk het idee dat je wel de suggesties van anderen opvolgt, maar direct daarna weer terug komt voor het volgende advies. Ga eens wat lezen over javascript debugging.

En zoals al eerder gezegd, drag-and-drop is zeker niet eenvoudig als je niet al goed thuis bent in javascript. IE en Firefox werken op dat gebied op veel plekken compleet anders. Dit probleem is daardoor niet op te lossen door links en rechts wat code te kopieren van anderen.

[ Voor 5% gewijzigd door f.v.b op 24-01-2008 08:08 ]