onclick, ondblclick, setTimeout und Opera

[molily]

Hallo,

Bei einem Doppelklick feuert Opera folgende Events in folgender Reihenfolge:

1. click
2. dblclick
3. click

Firefox z.B. hingegen:

1. click
2. click
3. dblclick

Wenn nur der click-Handler den Timeout startet und der dblclick-Handler den Timeout abschaltet, so ist es klar, dass der Timeout im Opera *nicht* abgeschaltet wird, denn am Ende wird nochmal der click-Handler ausgeführt.

Gut, jetzt sitzt du natürlich arg in der Tinte: Wie kann man im Opera Klick und Doppelklick unterscheiden? Etwas besseres als eine Timestamp-Lösung fällt mir nicht ein. Ich wüsste nicht, wie man sonst beim zweiten click-Ereignis feststellt, dass es zum vorigen dblclick-Ereignis gehört. Leider unterstützt Opera Eventobjekt.timeStamp nicht, aber man kann sich selbst etwas basteln. Ein anderes Indiz als die zeitliche Nähe wäre die räumliche.

<style type="text/css">  
[code lang=css]#p { width:200px; height:100px; background-color:red;}

</style>
<script type="text/javascript">

function click (e) {  
 var timestamp = new Date().getTime();  
 anzeige.innerHTML += "click      " + timestamp + "<br>";  
 anzeige.innerHTML += "    <strong>clicked</strong> | " + this.click_timeout + "<br>";  
 this.click_timeout = null;  
}  
function clickstart (e) {  
 var timestamp = new Date().getTime();  
 anzeige.innerHTML += "clickstart " + timestamp + " | " + this.click_timeout + "<br>";  
 if (this.click_timeout) {  
  anzeige.innerHTML += "    click-Timeout laeuft bereits, beende<br>";  
  return;  
 }  
 if (this.last_doubleclick) {  
  anzeige.innerHTML += "    Vergleiche den Timestamp mit dem des letzten Doppelklicks<br>";  
  var differenz = timestamp - this.last_doubleclick;  
  anzeige.innerHTML += "    Timestamp-Differenz: " + differenz + "<br>";  
  if (differenz < 10) {  
   anzeige.innerHTML += "    Timestamp-Differenz nicht gross genug, beende<br>";  
   return;  
  }  
 }  
 anzeige.innerHTML += "    setTimeout<br>";  
 var obj = this;  
 this.click_timeout = window.setTimeout(function () { click.apply(obj, [e]); }, 400);  
}  
  
function dblclick (e) {  
 var timestamp = new Date().getTime();  
 this.last_doubleclick = timestamp;  
 anzeige.innerHTML += "dblclick   " + timestamp + "<br>";  
 if (this.click_timeout) {  
  anzeige.innerHTML += "   clearTimeout<br>";  
  window.clearTimeout(this.click_timeout);  
  this.click_timeout = null;  
 }  
 anzeige.innerHTML += "    <strong>dblclick</strong> | " + this.click_timeout + "<br>";  
}  
  
window.onload = function () {  
 anzeige = document.getElementById("anzeige");  
 var p = document.getElementById("p");  
 p.onclick = clickstart;  
 p.ondblclick = dblclick;  
};

</script>

<p id="p"></a>

<pre id="anzeige"></pre>[/code]

Mathias