Niels Gamborgs online notesbog

Event objektet i Internet Explorer og Firefox

maj 8th, 2008. Kategori: Browser bugs and fixes, Webudvikling

Sad på Statsbiblioteket og skulle lave en logging funktion til den nye søgemaskine Summa. Vi har allerede flere logging funktioner tilknyttet Summa, men nu skulle vi bruge noget der kunne logge alle klik på links med AJAX funktionerne. Problemet med at logge links,  der udfører AJAX kald, er at siden ikke skiftes/opdateres 100%, men kun opdateres lokalt.

event.srcElement i Internet Explorer

Løsningen er event.srcElement, der kan læse onclick events i JavaScript.  Det smarte ved funktionen er at den kan aflæse alle attributterne i det tag du knytter den til.

F.eks. vil  event.srcElement.href returnere hvilken link, der henvises til og event.srcElement.onclick vil fortælle hvilke onclick events, der er tilknyttet tagget. 

event.target i Firefox

Desværre  findes event objektet desværre  i 2 forskellige udgaver. Funktionaliten er ikke helt ens for Firefox og Explorer event objektet, men til basale funktioner, som f.eks. at aflæse onclick, onmouseover eller onmouseout events, har forskellen ingen praktisk betydning.

I Firefox bruges syntaksen:

event.target

En crossbrowser løsning

Men nok snak.  Lad os kigge på noget kode, der virker med begge browsere (faktisk virker det også med Safari. (Safarai har nemlig sin helt egen særhed på event objektet) :

 function log(e) {

//Opsætning af event.srcElemenet/event.target objekt i henh. IE og Firefox
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;

 //Indsamling af data
 var id  =  targ.id;
 var href  =  targ.href;
 var onclick  =  targ.onclick;
 var data =  “onclick: ” + onclick + “\n\nID: ” + id + “\n\nhref: ” + href;

 //Tiden med dato objektet
 var now  =  new Date();
 var hour   =  now.getHours();
 var minute  =  now.getMinutes();
 var second  =  now.getSeconds();
 var monthnumber =  now.getMonth() + 1;
 var monthday  =  now.getDate();
 var year =  now.getFullYear();

 //Tidsformateringer
 var tidspunkt =  monthday + “-” + monthnumber + “-” + year + ” ” + hour +”:” + minute + “:” + second + “\n\n”;

 //Tjek af data med en alert 
alert(tidspunkt + data);

//overførsel til serveren via prototype Ajax.Request
// du skal altså have adgang til Prototype.js fra filen for at denne del virker

new Ajax.Request(‘globals/jsp/log.jsp’, {
      method: ‘get’,
      parameters:{
      data1: tidspunkt + data}
    });

}

Vigtigt! Når du kalder funktionen skal du sende parameteren “event” med ellers virker det ikke i Firefox. Funktionskaldet skal altså se sådan ud:

onclick=”log(event)”

Microsoft kan ikke se den medfølgende event parameter, og vil derfor ignorere den. Læs den grundige forklaring om event properties.

Send data fra klienten til serveren 

Efterfølgende skal data  sendes fra klienten til serveren, så man kan gemme data i sin log fil. Dette gøres lettest med AJAX og et af de gode AJAX biblioteker, der findes. Jeg har brugt en løsning med prototype.  Hvis du ønsker at sende data fra klient til server på en anden måde. F.eks. som en parameter i URL’en eller som et hidden input felt i en formular, skal du bare slettet den sidste kode blok.

Skriv en kommentar