Eventhandler-Attribute erzeugen - IE+Opera wollen nicht

[MudGuard]

Hi,

dieser Javascript-Code:

var anchorElem = document.createElement("a");
   divElem.appendChild(anchorElem);

var textNode = document.createTextNode("Test");
   anchorElem.appendChild(textNode);

var attrNode = document.createAttribute("href");
   attrNode.nodeValue = "#Blende_Navigation_ein";
   anchorElem.setAttributeNode(attrNode);

attrNode2 = document.createAttribute("onmouseover");
   attrNode2.nodeValue = "showNavi(); return false;";
   anchorElem.setAttributeNode(attrNode2);

funktioniert im Firefox einwandfrei.
Das Anker-Element wird in das gewünschte div eingesetzt und erscheint auch.
Bei mouseover wird die passende Funktion aufgerufen.

IE 6.0 und Opera 7.53 machen aber Zicken.
Auch dort wird das a-Element richtig eingesetzt und erscheint auch.
Wie an der Statuszeile bzw. am Tooltip erkennbar ist, wird auch das href-Attribut sauber gesetzt.
Aber bei mouseover wird die Funktion showNavi() nicht aufgerufen.

Operas Javascript-Konsole bleibt leer, IE zeigt auch keinen Fehlerhinweis.

Wenn ich direkt

<a href="#bla" onmouseover="showNavi(); return false;">Test</a>

ins HTML schreibe, funktioniert es - es liegt also nicht am Inhalt der Funktion showNavi().

Was ist das Problem, das die beiden Browser haben?

cu,
Andreas

[Thomas Meinike]

Hallo,

Aber bei mouseover wird die Funktion showNavi() nicht aufgerufen.

Probiere es so:

attrNode2 = document.createAttribute("onmouseover");
attrNode2.nodeValue = function(){showNavi(); return false;};
anchorElem.setAttributeNode(attrNode2);

MfG, Thomas

[MudGuard]

Hi,

attrNode2 = document.createAttribute("onmouseover");
attrNode2.nodeValue = function(){showNavi(); return false;};
anchorElem.setAttributeNode(attrNode2);

Leuchtet mir absolut nicht ein, wieso hier eine function als Wert übergeben werden muß.

So funktioniert es zwar im IE, aber im Opera immer noch nicht, und im Firefox nicht mehr ...

Trotzdem Danke ...

cu,
Andreas

[wahsaga]

hi,

attrNode2 = document.createAttribute("onmouseover");
   attrNode2.nodeValue = "showNavi(); return false;";
   anchorElem.setAttributeNode(attrNode2);
...
IE 6.0 und Opera 7.53 machen aber Zicken.
Auch dort wird das a-Element richtig eingesetzt und erscheint auch.
Wie an der Statuszeile bzw. am Tooltip erkennbar ist, wird auch das href-Attribut sauber gesetzt.
Aber bei mouseover wird die Funktion showNavi() nicht aufgerufen.

kannst du vielleicht setAttribute() stattdessen verwenden?

(oder hilft vielleicht auch schon der dortige hinweis weiter, dass der IE hier seine macken hat, was groß-/kleinschreibung hat? vielleicht möchte er hier lieber onMouseover haben ...?)

gruß,
wahsaga

[MudGuard]

Hi,

IE 6.0 und Opera 7.53 machen aber Zicken.
Auch dort wird das a-Element richtig eingesetzt und erscheint auch.
Wie an der Statuszeile bzw. am Tooltip erkennbar ist, wird auch das href-Attribut sauber gesetzt.
Aber bei mouseover wird die Funktion showNavi() nicht aufgerufen.

kannst du vielleicht setAttribute() stattdessen verwenden?

(oder hilft vielleicht auch schon der dortige hinweis weiter, dass der IE hier seine macken hat, was groß-/kleinschreibung hat? vielleicht möchte er hier lieber onMouseover haben ...?)

Hm. Mit anchorElem.setAttribute("onmouseover", "showNavi(); return false;"); funktioniert es im Opera und im Firefox. Aber nicht im IE.
Unabhängig davon, ob ich "onmouseover" oder "onMouseover" oder "onMouseOver" nehme.

Die Großbuchstaben bringen auch bei setAttributeNode keinen Effekt im IE, dafür aber im Firefox: nix geht mehr.

Trotzdem Danke.

Arghh. Ich hasse Javascript.

cu,
Andreas

[Thomas Meinike]

Hallo,

Hm. Mit anchorElem.setAttribute("onmouseover", "showNavi(); return false;"); funktioniert es im Opera und im Firefox. Aber nicht im IE.

Kleinen DOM-Aufraeumer hinterher schicken:

anchorElem.setAttribute("onmouseover","showNavi(); return false;");
if(anchorElem.outerHTML)anchorElem.outerHTML=anchorElem.outerHTML;

MfG, Thomas

[wahsaga]

'nabend Andreas,

wenn ich einen eventhandler für ein bereits im dokument vorhandenes element setzen will, nutze ich einfach

[referenzaufelement].onclick = function(){ blah() };

eine referenz auf dein element hast du ja auch vorliegen, nachdem du es mit createElement() angelegt hast - mal probiert, ob diese schreibweise dann auch "funktioniert"?

gruß,
wahsaga

[MudGuard]

Hi,

wenn ich einen eventhandler für ein bereits im dokument vorhandenes element setzen will, nutze ich einfach

Das klingt so, als ob Du manchmal auch Eventhandler für nichtvorhandene Elemente setzt ;-)

[referenzaufelement].onclick = function(){ blah() };
eine referenz auf dein element hast du ja auch vorliegen, nachdem du es mit createElement() angelegt hast - mal probiert, ob diese schreibweise dann auch "funktioniert"?

das funktioniert in allen 3.

cu,
Andreas

[molily]

Hallo,

[referenzaufelement].onclick = function(){ blah() };

In dem Fall wäre die »Container«-Funktion natürlich überflüssig und die Referenz auf das Funktionsobjekt blah reicht aus.

Mathias

[MudGuard]

Hi,

[referenzaufelement].onclick = function(){ blah() };
In dem Fall wäre die »Container«-Funktion natürlich überflüssig und die Referenz auf das Funktionsobjekt blah reicht aus.

Dann müßte das "return false;", das bei
<a href="#" onclick="blah(); return false;"> steht, in blah() rein?

Also

function blah()
{
//whatever
   return false;
}

anchorElem.onclick = blah;

?

cu,
Andreas

[molily]

Hallo,

Dann müßte das "return false;", das bei
<a href="#" onclick="blah(); return false;"> steht, in blah() rein?

Also

function blah()
{
//whatever
   return false;
}

anchorElem.onclick = blah;

?

Ja. Das sollte äquivalent sein.

Mathias

[MudGuard]

Hi,

Ja. Das sollte äquivalent sein.

Danke.

cu,
Andreas

[wahsaga]

hi,

[referenzaufelement].onclick = function(){ blah() };

In dem Fall wäre die »Container«-Funktion natürlich überflüssig und die Referenz auf das Funktionsobjekt blah reicht aus.

auch dann, wenn ich der funktion noch einen parameter übergeben möchte? (this in diesem falle)
das habe ich nicht hinbekommen.

gruß,
wahsaga

[molily]

hi,

[referenzaufelement].onclick = function(){ blah() };

In dem Fall wäre die »Container«-Funktion natürlich überflüssig und die Referenz auf das Funktionsobjekt blah reicht aus.

auch dann, wenn ich der funktion noch einen parameter übergeben möchte? (this in diesem falle)

Kommt eben auf den Parameter an und ob die Funktion auf dessen Daten nicht eleganter zugreifen kann. Sofern die Funktion als Parameter immer das Knotenobjekt empfangen soll, bei dem der Event passierte, kann natürlich auch direkt in der Funktion blah mit this gearbeitet werden. Das ist äquivalent zu Eventobjekt.target (DOM) bzw. Eventobjekt.srcElement (Microsoft).
Wenn du blah benutzt, um sie mit verschiedenen Parametern aufzurufen, kannst du ja das Eventobjekt durchreichen, dann hast du darüber alle Event-Eigenschaften:
Elementknoten1.onclick = function (e) { if (!e) e = window.event; blah(e, parameter1); };
Elementknoten2.onclick = function (e) { if (!e) e = window.event; blah(e, parameter2); };

Mathias

[MudGuard]

Hi,

statt

attrNode2 = document.createAttribute("onmouseover");
   attrNode2.nodeValue = "showNavi(); return false;";
   anchorElem.setAttributeNode(attrNode2);

hab ich jetzt

if (! window.opera)
    {
        var attrNode2 = document.createAttribute("onmouseover");

if (document.all)
            attrNode2.nodeValue = function(){showNavi(); return false;};
        else
            attrNode2.nodeValue = "showNavi(); return false";

anchorElem.setAttributeNode(attrNode2);
    }
    else
    {
        anchorElem.setAttribute("onMouseOver", "showNavi(); return false;");
    }

genommen. Das funktioniert in IE 6.0, Opera 7.53 und Firefox 1.0.

Statt 3 schön übersichtlichen und logischen Zeilen so ein Aufwand ...

cu,
Andreas

[Tobias Müller]

Hallo MudGuard,

if (! window.opera)
    {
        var attrNode2 = document.createAttribute("onmouseover");

if (document.all)
            attrNode2.nodeValue = function(){showNavi(); return false;};
        else
            attrNode2.nodeValue = "showNavi(); return false";

anchorElem.setAttributeNode(attrNode2);
    }
    else
    {
        anchorElem.setAttribute("onMouseOver", "showNavi(); return false;");
    }

genommen. Das funktioniert in IE 6.0, Opera 7.53 und Firefox 1.0.

Statt 3 schön übersichtlichen und logischen Zeilen so ein Aufwand ...

Dieser Aufwand ist doch garnicht nötig.

Ich würde aus

attrNode2 = document.createAttribute("onmouseover");
   attrNode2.nodeValue = "showNavi(); return false;";
   anchorElem.setAttributeNode(attrNode2);

einfach

anchorElem.onmouseover = function() { showNavi(); return false; };

machen. ich habe das kürzlich genauso gemacht und es klappt einwandfrei in Opera 7+, IE 5+, Netscape 6+/Mozilla und Safari.

MfG, Mülli

[Joachim]

Hi,

attrNode2 = document.createAttribute("onmouseover");

hast Du mal:
attrNode2.onmouseover = showNavi;
getestet?
IE hat doch immer dann Probleme mit dom Methoden, wenn er direkt auf eine Eigenschaft zugreifen kann...

Gruesse, Joachim

[MudGuard]

Hi,

hast Du mal:
attrNode2.onmouseover = showNavi;
getestet?

Ja, jetzt nach Deinem Vorschlag. Das funktioniert auch (so wie attrNode2.onmouseover = function() { showNavi(); return false; }

Danke nochmal, auch an wahsaga und Thomas!

cu,
Andreas