Event-Handler Problem

[-xXx-]

Morgen.

Hallo, ich habe folgendes Script:

  
<div id='eins' ondblClick="loesche();" onClick="aendere();">BILD</div>  

Wenn man doppelt draufklickt (ondblClick), wird der div-bereich gelöscht (bzw. ausgeblendet)
Wenn man einfach druafklickt, wird der Text im Div-Bereich geändert.

Nun habe ich folgendes Problem:
Bei einem Doppelklick, verändert sich erst das Bild (wegen onclick) und beim zweiten Klick wird es ausgeblendet (ist ja auch logisch). Wie kann ich das umgehen? Also, dass onClick nur ausgeführt wird, wenn kein dblClick zutrifft?

LG
-xXx-

[jumini]

Wie kann ich das umgehen? Also, dass onClick nur ausgeführt wird, wenn kein dblClick zutrifft?

Du kannst die Ausführung des onClick-Events mit Hilfe von setTimeout verzögern (um z.B. 0.25 Sekunden) und dann mithilfe einer Variable überprüfen ob dem aktuellen Klick noch der dblClick-Event folgt.

Konkret bedeutet das:

var isDblClick = false;  
  
function aendere(){  
  setTimeout(function(){  
    if(isDblClick) return;  
    // ... dein Code  
  }, .25);  
}  
  
function loesche(){  
  isDblClick = true;  
  // ... dein Code  
}

<div id='eins' ondblClick="loesche();" onClick="aendere();">BILD</div>

Gruß,
jumini

[Der Martin]

Hallo,

Du kannst die Ausführung des onClick-Events mit Hilfe von setTimeout verzögern (um z.B. 0.25 Sekunden)

ja, guter Vorschlag.

function aendere(){
  setTimeout(function(){
    if(isDblClick) return;
    // ... dein Code
  }, .25);
}

Das wären aber 0 Sekunden, weil 0.25 auf 0 abgerundet wird.
Die Methode setTimeout() erwartet die Verzögerung in Millisekunden.

Ciao,
 Martin

[jumini]

function aendere(){
  setTimeout(function(){
    if(isDblClick) return;
    // ... dein Code
  }, .25);
}

Das wären aber 0 Sekunden, weil 0.25 auf 0 abgerundet wird.
Die Methode setTimeout() erwartet die Verzögerung in Millisekunden.

Ja natürlich 250, ich bin zu sehr von meinen eigenen Funktionen verwöhnt ;)
Außerdem muss für alle Szenarien die ein mehrfaches Klicken erlauben die Variable natürlich wieder zurückgesetzt werden (isDblClick = false; ggf. erneuter Timeout).

Gruß,
jumini

[-xXx-]

Danke, hat funktioniert :)

[LX]

Deine Herangehensweise ist falsch. Die Frage, die Dir fehlt: ab wann ist ein 2. Klick kein Doppelklick mehr? Sagen wir, Du entscheidest Dich für 250ms (ein ganz brauchbarer Durchschnittswert). Dann musst Du im Click einen Timeout setzen, der 250ms lang auf den 2. Klick wartet und wenn dieser nicht kommt, die Änderung vornimmt, während ein 2. Klick den Timeout entfernt und das Ausblenden startet (übrigens ist es besser, das onclick nachträglich in einem Script zu setzen, das macht es lesbarer):

<script type="text/javascript">  
document.getElementById('eins').onclick=function(){  
   if (!isNaN(this.timeout)) {  
       window.clearTimeout(this.timeout);  
       loesche();  
   } else {  
       this.setTimeout(aendere, 250);  
   }  
};  
</script>

Gruß, LX

[LX]

Tippfehler:

statt

this.setTimeout()...

muss es natürlich heißen

this.timeout = window.setTimeout();

Gruß, LX

[ChrisB]

Hi,

Die Frage, die Dir fehlt: ab wann ist ein 2. Klick kein Doppelklick mehr? Sagen wir, Du entscheidest Dich für 250ms (ein ganz brauchbarer Durchschnittswert).

Was ein Doppelklick ist, hängt vom Nutzer ab - und davon, wie er das auf seinem System eingestellt hat.
Gerade Nutzer mit motorischen Einschränkungen dürften hier öfters mal vom Default abweichende Einstellungen wählen.

Deine Herangehensweise ist falsch.

Stimmt.
Bedienung per Doppelklick ist „im Web“ absolut unüblich.

MfG ChrisB

[jumini]

Deine Herangehensweise ist falsch.

Stimmt.
Bedienung per Doppelklick ist „im Web“ absolut unüblich.

Unüblich != falsch. Ein Doppelklick ist doch absolut nichts Schlechtes. Im Gegenteil, er kann die GUI bei sinnvoller Integration praktisch erweitern.
Wenn jetzt jeder alles unübliche vermeiden würde, hätten wir ja keinen Fortschritt mehr. Amen.

Gruß,
jumini

[ChrisB]

Hi,

Deine Herangehensweise ist falsch.

Stimmt.
Bedienung per Doppelklick ist „im Web“ absolut unüblich.

Unüblich != falsch. Ein Doppelklick ist doch absolut nichts Schlechtes.

Wenn er den Nutzergewohnheiten zuwiderläuft - doch.

Wenn jetzt jeder alles unübliche vermeiden würde, hätten wir ja keinen Fortschritt mehr. Amen.

Totschlagsargument.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Bedienung per Doppelklick ist „im Web“ absolut unüblich.

Unüblich != falsch. Ein Doppelklick ist doch absolut nichts Schlechtes.

Wenn er den Nutzergewohnheiten zuwiderläuft - doch.

Tut er das? Die Grenze zwischen Desktop-Anwendung und Web-Anwendung verschwindet immer mehr …

Wenn jetzt jeder alles unübliche vermeiden würde, hätten wir ja keinen Fortschritt mehr. Amen.

Totschlagsargument.

Nö.

Qapla'

[ChrisB]

Hi,

Unüblich != falsch. Ein Doppelklick ist doch absolut nichts Schlechtes.

Wenn er den Nutzergewohnheiten zuwiderläuft - doch.

Tut er das?

Ja - und zwar unter anderem darin, dass ich als Nutzer nicht bestimmen kann, ab wann zwei Klicks als ein Doppelklick gelten, wenn für diese Unterscheidung einfach nach Belieben eine Zeitspanne vom Seitenautor festgelegt wird.

MfG ChrisB

[jumini]

Ich hab noch einen Totschläger: ich möchte eine Dateiverwaltungsoberfläche im üblichen Sinne entwickeln. Dateien sollen per Drag & Drop verschoben und nur bei einem weiteren Mouse-Event ausgeführt werden. Rätst du mir weiterhin von einem Doppelklick ab?

Aber im Ernst, ein Lösungsansatz um die vom Client deffinierte Doppelklick-Zeit herauszufinden wäre doch mal interessant. Mir fällt spontan nur eine Möglichkeit ein: sofern es sich bei dem Element um einen Text-Node handelt, kann JavaScript überprüfen ob der Text markiert wurde - denn genau das macht mein OS bzw Browser bei einem Doppelklick (siehe da: der Doppelklick ist schon längst im Web ;)). Das schließt zwar das <a>-Element aus, aber da bietet CSS ja Abhilfe.

Bin weg, doppelklicken.
jumini

[-xXx-]

Stimmt.
Bedienung per Doppelklick ist „im Web“ absolut unüblich.

Ich weiß. Aber genau das soll es ja 'interessant' machen.
Außerdem möchte ich eine schnelle Bedienung haben. Ein Doppelklick bzw. einfacher Klick ist schneller gemacht als ein Klick und dann nochmal ein Auswahlmenü...

Danke an alle, es funktioniert jetzt :)

[LX]

Wenn Du schon neue Konzepte ausprobieren möchtest:

• Drag'n'Drop in einen Papierkorb
• Einblenden von Funktionsicons bei click oder mouseover über dem Objekt
• Gestures

Gruß, LX

[molily]

Bedienung per Doppelklick ist „im Web“ absolut unüblich.

Ich weiß. Aber genau das soll es ja 'interessant' machen.

Wenn ich einmal aus Versehen zuviel klicke, wird das Bild gelöscht?! Wirklich benutzerfreundlich.

Außerdem möchte ich eine schnelle Bedienung haben.

Dann mach einen Änder- und einen Lösch-Button. Das ist das einfachste, schnellste, zuverlässigste und zugänglichste. Diese können wie gesagt zur rechten Zeit eingeblendet werden oder nach Auswahl an zentraler Stelle stehen.

Mathias