"Du trykkede uden for boksen"

<script type="text/javascript">
document.onclick = function(e){
  var boks;
  if(e.target.id=="knap"){
    //der er trykket på knappen
    //lav boksen, hvis den ikke allerede eksisterer:
    if(!document.getElementById("boks")){
      boks = document.createElement("div");
      boks.appendChild(document.createTextNode("tekst, tekst, tekst"));
      boks.setAttribute("id","boks");
      document.getElementsByTagName("body")[0].appendChild(boks);
    }
  } else if(e.target.id!="boks"){
    //der er trykket uden for knappen og udenfor boksen
    //så vi ikke får fejlmelding, hvis vi trykker på siden, når der ikke er en boks:
    boks = document.getElementById("boks");
    if(boks)
      document.getElementsByTagName("body")[0].removeChild(boks);
  }
}
</script>

Det var egentligt en utrolig simpel måde, som virker perfekt!
Jeg har dog aldrig støt på noget i denne stil (med hensyn til at bruge target.id sammen med onclick eventens return værdig), så er det muligt at få et par link til nogen referencer og information omkring dette, og hvilke ting, i samme stil, der også er muligt.

Tja, inden for arten dokumentation:
http://developer.mozilla.org/en/docs/DOM:event.target
http://developer.mozilla.org/en/docs/DOM:event

Du får også lige et link til en side, som jeg nogle gange bruger som inspiration/hjælp:
http://www.quirksmode.org/resources.html

Det lader så til, at det skal rettes lidt til for at det virker i IE.

Og det skulle gerne være klaret med det her. Testet i IE 7 og nyeste versioner af firefox og opera:
document.onclick = function(e){
  var boks;
  if(e){
    //ikke IE:
    if(e.target.id=="knap"&&!document.getElementById("boks")){
      //der er trykket på knappen og
      //boksen er ikke allerede lavet:
      boks = document.createElement("div");
      boks.appendChild(document.createTextNode("tekst, tekst, tekst"));
      boks.setAttribute("id","boks");
      document.getElementsByTagName("body")[0].appendChild(boks);
    } else if(e.target.id!="boks"&&document.getElementById("boks")){
      //der er trykket uden for knappen og udenfor boksen og
      //boksen eksisterer:
      boks = document.getElementById("boks");
      document.getElementsByTagName("body")[0].removeChild(boks);
    }
  } else if(event.srcElement) {
    //IE:
    if(event.srcElement.id=="knap"&&!document.getElementById("boks")){
      //der er trykket på knappen og
      //boksen er ikke allerede lavet:
      boks = document.createElement("div");
      boks.appendChild(document.createTextNode("tekst, tekst, tekst"));
      boks.setAttribute("id","boks");
      document.getElementsByTagName("body")[0].appendChild(boks);
    } else if(event.srcElement.id!="boks"&&document.getElementById("boks")){
      //der er trykket uden for knappen og udenfor boksen og
      //boksen eksisterer:
      boks = document.getElementById("boks");
      document.getElementsByTagName("body")[0].removeChild(boks);
    }
  }
}

<ole>

Husk:
    boks = null;

- efter fjernelsen. Ellers akkumuleres elementerne i hukommelsen  ;o)

Men hvorfor ikke bare vise eller skjule boksen, når den én gang er lavet? Teksten sættes så med:
    boks.firstChild.nodeValue = "Ny tekst";

/mvh
</bole>

fordi han er en spade :P nej pjatter bare