Problem i IE: Angive en event på et element via JS

<ole>

Du bruger attachEvent:
    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/attachevent.asp

Mener du virkelig, den kode virker i FF? OMG ... er der da overhovedet ingen grænser for dens DOM-fejl?  =8-O

Det må absolut ikke virke. I FF skal du bruge metoden addEventListener:
    http://developer.mozilla.org/en/docs/DOM:element.addEventListener

/mvh
</bole>

Du bør også bruge:
    document.getElementsByTagName("body")[0].appendChild(temp)

- hvis du gerne vil øve dig på at skrive DOM, der kan anvendes under XHTML, når det engang med tiden kan bruges på WWW  :)

Tak for dit svar.

Med andre ord skal jeg opdele koden efter hvilken browser brugeren bruger? Hvad anbefaler W3C man gør?

W3C har fastlagt addEventListener som metoden at anvende

... okay jeg antager at svaret er ja til mit første spørgsmål (15:27:06).

Smid et svar :) og mange tak for hjælpen.

Lige et tillægsspørgsmål: Hvordan eller hvor kan jeg til en anden gang se om en given DOM-operation er "lovlig"?

Fandt lige en lækker funktion jeg tænkte jeg lige ville dele hvis andre skulle støde på samme problem som jeg :)

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        elm['on' + evType] = fn;
    }
}

Da ingen af de store browsere har implementeret ægte XHTML, men falder tilbage på HTML, når der opstår en fejl, er der ikke idag nogen mulighed for at udvikle seriøse XHTML-applikationer, der kan bruges under XHTML. Det er du nødt til at gøre 'i blinde' - udfra viden du må læse dig til  :o|

FF's implementation er rent ud elendig - da den bygger på deres i forvejen dårlige HTML/DOM-implementering ... og MS har besluttet ikke at understøtte ægte XHTML, før de er færdige med en helt ny version, der intet har med MSHTML at gøre. Derfor kommer IE7.0 heller ikke til at understøtte XHTML.

Hvis du skriver XHTML idag, får du bare tillagt dig en bunke dårlige kodevaner, som du tror er XHTML - men som bare vil vælte browseren med en XML-fejl, når vi engang kommer dertil  ;o)

HTML4.01-Strict er mit bedste bud på et fornuftigt standard-valg i skrivende stund.

Se, det er god stil! Du finder selv noget kode efter du har fået svar - og deler det med os andre - lækkert! Dig skulle vi have nogle flere af her på eksperten :D

spoton, om jeg så må sige  ;D

Denne side, peger også mod mange gode sider:
    http://developer.mozilla.org/en/docs/Migrate_apps_from_Internet_Explorer_to_Mozilla

Jes jeg kører også HTML4.01, men derfor bør jeg vel alligevel sørge for at skrive fremtidssikret DOM-Javascript (ved fx at undgå at bruge setAttribute('onmouseover')).

En helt anden ting - kan man ikke kan anvende funktioner med parametre på events? Fx virker dette her ikke
elm.addEventListener(elm, 'alert(\'hej\');');

Jeg er vant til at bruge document.onmousemove - og der kan man heller ikke bruge parametrer på den måde.

Men det kan man måske bare ikke i forbindelse med events? Egentlig forstår jeg jo godt hvorfor, eftersom
document.onmousemove = badabing(par1, par2);

... vil resultere i at onmousemove bliver sat lig med det badabing returnerer, hvilket jo ikke er den umiddelbare mening med at opsætte events.

Har jeg ret eller overser jeg noget? :)

Ups, fejl i min 4. linje i 15:59:11 -der skulle naturligvis stå fx:
elm.addEventListener('click', 'alert(\'hej\');');

Ja, hvis du skal tildele en funktion til et event kan du gøre således:

document.onmousemove = function(par1, par2) { ... };

om man kan gøre det samme med addEventListener ved jeg ikke lige - ole ved det nok :)

elm.addEventListener('click', function(varA){alert(varA)});

- men det kommer jo anpå, hvad du mener med parametre. Er der et specifikt tilfælde, du tænker på?

Tak begge to :-)

Smid et svar olebole.

- gerne  :)

Jeg synes i øvrigt aldrig, du mailede tilbage. Gik projektet i stå?  :)

... nu kan jeg ikke erindre at have modtaget en mail fra dig olebole, så jeg antager beskeden ikke var til mig :-)

sorry ... en anden Rasmus  :D

Tak for points  ;o)

... nå jeg bliver nødt til lige at lege Spørgejørgen - for her kommer endnu et spørgsmål:

Funktionen der skal køres ved onmousedown skal i sin nuværende tilstand have to parametre. Jeg har hidtil brugt følgende kode til at tilføje onmousedown'en:
temp.firstChild.setAttribute('onmousedown', 'return drag.activate(' + playerRef + ');');

Det er i forbindelse med et drag'n drop interface.

Kan dette oversættes til den "rigtige" metode (addEventListener/attachEvent)? Eller skal jeg lave nogle rokeringer i koden sådan at funktionen kan kaldes uden parametre (umiddelbart virker det mere bøvlet synes jeg...)

Jeg forstår ikke årsagen til 'return', men ville mene, du skulle skrive:

  temp.firstChild.attachEvent('mousedown', function(){drag.activate(playerRef)});
- og:

  temp.firstChild.addEventListener('onmousedown', function(){drag.activate(playerRef)}, false);

Meningen med "return" er, at man ikke skal kunne markere noget tekst mens man trækker et element (det er fra et drag'n drop-script). Giver det ikke mening? :)

... Altså fx vil man ikke kunne markere denne tekst
<div onmousedown="return false;">bongo</div>

Men hvordan opnår jeg det, at man ikke må kunne markere, med attachEvent/addEventListener?

... kan du hjælpe mig med det sidstnævnte problem Olebole?

temp.firstChild.attachEvent('mousedown', function(){drag.activate(playerRef); return false; });

Jeg takker :)

velbekomme :)

Øhm, jeg kan altså ik' få det til at virke :( Prøv at køre dette "test-script":
<script type="text/javascript">
    function addEvent(elm, evType, fn, useCapture) {
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn, useCapture);
            return true;
        }
        else if (elm.attachEvent) {
            var r = elm.attachEvent('on' + evType, fn);
            return r;
        }
        else {
            elm['on' + evType] = fn;
        }
    }
    function test() {
        return false;
    }
    var temp = document.createElement('div');
    temp.appendChild(document.createTextNode('Denne kan man godt markere'));
    addEvent(temp, 'mousedown', function(){ return false; });
    document.body.appendChild(temp);
    document.onselectstart = function() { return false; };
</script>
<div onmousedown="return false;">Denne kan man ikke markere</div>

I IE har jeg disabled markering totalt via onselectstart - men i Firefox kan man godt markere den øverste div :( Any bright ideas?

Jeg har stadig ikke fundet en fungerende løsning :/ Hjælp mig inden jeg begynder at bruge innerHTML :P

Måske man bare sku oprette et nyt spørgsmål... (spørgsmålet 29/05-2006 14:49:24 er jo klart forskellig fra det oprindelige i denne "tråd")

Prøv lige at smide din initialiseringskode ind i window.onload-eventet som vist herunder:

<script type="text/javascript">
    function addEvent(elm, evType, fn, useCapture) {
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn, useCapture);
            return true;
        }
        else if (elm.attachEvent) {
            var r = elm.attachEvent('on' + evType, fn);
            return r;
        }
        else {
            elm['on' + evType] = fn;
        }
    }
    function test() {
        return false;
    }

    window.onload = function() {
        var temp = document.createElement('div');
        temp.appendChild(document.createTextNode('Denne kan man godt markere'));
        addEvent(temp, 'mousedown', function(){ return false; });
        document.body.appendChild(temp);
    }

    document.onselectstart = function() { return false; };
</script>
<div onmousedown="return false;">Denne kan man ikke markere</div>

Tak for svaret, men det ser heller ikke ud til at virke :/

Se evt. her: http://shokk.dk/over.php

OK, så prøv denne version:

<html>
<head>
  <script type="text/javascript">
    function addEvent(elm, evType, fn, useCapture) {
      if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
      }
      else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
      }
      else {
        elm['on' + evType] = fn;
      }
    }
    function test() {
      return false;
    }
    window.onload = function() {
      var temp = document.createElement('div');
      temp.appendChild(document.createTextNode('Denne kan man godt markere'));
      addEvent(temp, 'mousedown', function(){ return true; });
      addEvent(temp, 'selectstart', function(){ event.cancelBubble = true; return true; });
      document.body.appendChild(temp);
    }
    document.onselectstart = function() { return false; };
  </script>
</head>
<body>
  <div onmousedown="return false;">Denne kan man ikke markere</div>
</body>
</html>

Virker desværre stadig ikke i FF -> http://shokk.dk/over.php :/

Man kan stadig markere teksten i den "javascript-skabte" div. Uuuunderligt.

På tide jeg giver op eller...? :)

Jeg gik ud fra at du ville have det sådan som teksten i laget beskrev, nemlig at den første (øverste) ikke kunne markeres og den sidste (nederste og genererede) kunne markeres - det fungerer i det mindste i både min FF 1.0 og IE 6.0

Kan du kort summere op hvad det er for en funktionalitet du ønsker...?

Arh okay, ja det er måske lidt dumt skrevet.

Well, når man trykker på den div der bliver oprettet dynamisk af Javascript, må man ikke kunne trække og markere. Men det kan man i dit eksempel.

Ja, det vil jeg mene er pga. denne linie:

  addEvent(temp, 'selectstart', function(){ event.cancelBubble = true; return true; });

umiddelbart ville jeg jo bare forvente at du skulle fjerne denne linie i den dynamiske/javascript-styrede oprettelse af div-elementet, da det linien gør er at sætte et event som undlader at udføre nogle af de indeholdende elementers selectstart-events (cancelBubble = true forhindrer dette).

Altså:

    window.onload = function() {
      var temp = document.createElement('div');
      temp.appendChild(document.createTextNode('Denne kan man godt markere'));
      addEvent(temp, 'mousedown', function(){ return true; });
      document.body.appendChild(temp);
    }

Jeg prøvede lige at udkommentere den linje du omtaler. Det hjalp intet.
Du kan se siden her:
http://shokk.dk/over.php
Man kan stadig markere den dynamisk-genererede div :(

Jeg forsøgte med dette:
temp.onmousedown = function() { return false; };

Det virker faktisk i Firefox. Men det er garanteret ikke en del af DOM-standarden??

Hvorfor ændrer du så ikke bare linien:

    addEvent(temp, 'mousedown', function(){ return true; });

til:

    addEvent(temp, 'mousedown', function(){ return false; });

... har jeg prøvet - virker ikke. Se opdateret version på:
http://shokk.dk/over.php

Ja, der er altså noget ved den der DOM som jeg ikke forstår (faktisk er der en del, men lad nu det ligge :))... såvidt jeg kan se, er det kode du får til at fungere og det jeg foreslår (som altså ikke fungerer) nøjagtigt det samme, men det synes addEvent så åbenbart ikke... :(

Spørgsmålet er om du skal skal ud i noget med preventDefault() (FF/NS osv) og returnValue = false (IE) for at forhindre mousedown i at udføres...

addEvent(temp, 'mousedown', function(e){ e = e ? e : event; if(e.preventDefault) e.preventDefault(); else if(e.returnValue) e.returnValue = false; else return false; });

jeg er usikker på om det spiller, men det burde være noget i den retning...