Klick und Doppelklick

Yogilein · 11. Juni 2014

Hallo zusammen,

mal wieder eine neue (Mehrfach-) Frage von mir

Wie kann ich in einem Element gleichzeitig einen Klick und einen Doppelklick abfragen? Ich meine damit: bei einem einfachen Klick mache dies und bei einem Doppelklick mache das.

Und die Ergänzungsfrage dazu: Wie kann ich in einer usemap einen Doppelklick abfragen. Bei mir ergibt die Abfrage keine Reaktion, lediglich der einfache Klick führt zu einem Ergebnis.

Und noch eine Frage zur usemap, bzw. zu area: Wie wichtig ist es, dort href anzugeben? Ohne href funktioniert alles super, nur der Validator meckert. Mit href="javascript:void(0)" bekomme ich (je nach Browser unterschiedlich) einen häßlichen Rahmen, den ich bis jetzt selbst mit CSS nicht bei allen Browsern ausblenden konnte.

LG Yogilein

mikdoe · 11. Juni 2014

Probier das mit dem Klick doch einfach mal aus. Einfach mal beide Eventhandler an eine Taste binden und klicken. Testen würde ich das auf jeden Fall, weil das ggf. in den Browsern unterschiedlich funktioniert, könnte mir vorstellen, dass das zu den Sachen gehört, die bei jedem Browser anders sind.

j-l-n · 11. Juni 2014

Folgende Idee für die Unterscheidung von Klick und Doppelklick: beim ersten Klick rufst du nicht die onclick-Funktion auf, sondern eine Funktion mit Timeout. Diese wartet, ob innerhalb der und der Zeit noch ein zweiter Klick (=Doppelklick) erfolgt oder nicht; und ruft je nachdem die passende Funktion auf.

Yogilein · 11. Juni 2014

mikdoe schrieb:
Probier das mit dem Klick doch einfach mal aus. Einfach mal beide Eventhandler an eine Taste binden und klicken.

Wenn es so einfach wäre ... Das geht nämlich nicht, zumindest nicht bei mir. Es wird immer nur der Einfachklick ausgelöst.

Meine Abfrage sieht ungefähr so aus:

Code:

<div " ondblclick="klick1()" onclick="klick2()">

Selbst wenn ich, wie in diesem Beispiel, ondbclick an erste Stelle setze.

- - - Aktualisiert - - -

Julian schrieb:
Folgende Idee für die Unterscheidung von Klick und Doppelklick: beim ersten Klick rufst du nicht die onclick-Funktion auf, sondern eine Funktion mit Timeout. Diese wartet, ob innerhalb der und der Zeit noch ein zweiter Klick (=Doppelklick) erfolgt oder nicht; und ruft je nachdem die passende Funktion auf.

Soweit war ich auch schon, aber irgendwie ist das wieder EDV zu Fuß. Und was dabei nämlich nicht berücksichtigt wird, ist die individuelle Doppelklickgeschwindigkeit, die ja bei jedem unterschiedlich sein kann.

Ich hoffte eigentlich, dass es dazu eine (einfache) Standardlösung gibt.

j-l-n · 11. Juni 2014

Anders geht es allerdings leider nicht: javascript - how to differentiate single click event and double click event? - Stack Overflow
Und das ist die Erklärung dafür:

The order of events for a dblclick is:

mousedown
mouseup
click
mousedown
mouseup
click
dblclick

Yogilein schrieb:
Und was dabei nämlich nicht berücksichtigt wird, ist die individuelle Doppelklickgeschwindigkeit, die ja bei jedem unterschiedlich sein kann.

Ja, das stimmt, das ist ärgerlich. Bei einem hohen timeout ist der Nachteil, dass ein singleclick-Event dann nur sehr verzögert ausgeführt wird...

mikdoe · 11. Juni 2014

Yogilein schrieb:
Code:

<div " ondblclick="klick1()" onclick="klick2()">

Ist das dein Code oder beim Copy&Paste kaputt gegangen?

Yogilein · 11. Juni 2014

mikdoe schrieb:
Ist das dein Code oder beim Copy&Paste kaputt gegangen?

Nö, so sollte er nicht aussehen. Ich hatte ihn kopiert und dann beim Entfernen von unwesentlichen Teilen nicht sauber gearbeitet.

mikdoe · 12. Juni 2014

Schau mal, ob dir das gefällt:

HTML:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<input id="btn" type="button" value="Test">
<script>
	var button = document.getElementById('btn');
	button.onclick = function(){
		if (button.timer){
			clearTimeout(button.timer);
			button.timer = null;
			alert("doppelt");
		}
		else{
			button.timer = setTimeout(function(){
				button.timer = null;
				alert("einfach");
			},300);
		}
	}
</script>
</body>
</html>

SteelWheel · 12. Juni 2014

Guten Morgen,

ich bin jetzt etwas irritiert - soll vorkommen. Die Abfragereihenfolge von Klick-Events etc. ist ... ja, verwirrend! Ich habe selbst - Anfang des Jahres - eine Mischlösung benötigt: Die Verwendung von einem Klick (!; Halten) schiebt mein Element über den Screen. Der Doppelklick öffnet auf dem Element das Menü für das Element ... das funktioniert auf so ziemlich allen Geräten - sogar Smartphones, Tables und PC ja eh. Wenn ich also nun lese, dass es eine fixe Reihenfolge der Abwicklung gibt, dürfte meine Lösung aber gar nicht funktionieren. Hier mal ein Auszug (weil das JavaScript ein Monster ist):

Code:

$("div[id^=sp]").draggable({
	...,
	create: function(event, ui){
		...
	},
	start: function(){
		...
	},
	drag: function(event,ui){
		...
	},
	stop: function(event,ui){
		...
	}

}).on("dblclick", function(ev){
	...
});

Mit einem Single-Klick öffnet niemand das Untermenü! Zugegeben, da ist noch ein touch-Plugin enthalten, damit das Drag'n'Drop auf den Tablets läuft, aber selbst die (!) wollen 2x angeditscht werden. Obiges ist eigener Code im Live-Einsatz ... Schwierigkeiten macht da auch kein Browser - mit Exoten (Sleipnir (o. ä.), Maxthon, ...) gecheckt ... es können alle! Nuuur ... wenn "click" vor "doubleclick" gewertet werden würde (und ich gehe davon aus, dass das Event-Handling bei jQ ja nur Bordmittel im Hintergrund verwenden wird), hätte ich ein Problem ... habe ich aber nicht.

Könnte mir bitte jemand erklären, warum diese Liste oben so "strikt" sein soll?

tsseh · 12. Juni 2014

ich verstehe bei dir, wie so oft, mal wieder nicht, was du eigentlich sagen willst.
bei deinem code sehe ich nicht, wo es probleme geben könnte.

SteelWheel · 12. Juni 2014

Och, hesst, soooo oft konnte das noch gar nicht passieren!!! Also nochmal mit etwas mehr Chronologie, weil es ja noch früh am Tag ist und nicht jeder schon Drehzahl hat:

Julian schrieb:

The order of events for a dblclick is:

mousedown
mouseup
click
mousedown
mouseup
click
dblclick

... und erwähnte "Doppelklick-Geschwindigkeiten".

Ich bin daraufhin verwirrt, da mein gezeigtes Script (stellt nämlich kein Problem dar) dieser Reihenfolge widerspricht - es geht nur mit Doppelklick; wenn ich die Abwicklung von Events für "doubleclick" also korrekt verstehe, müsste "click" schließlich vorher ausgeführt werden - das würde aber (in meinem Fall) etwas anderes auslösen.

Wie "verbindlich" ist die Reihenfolge der Events (s. Julian) also, wenn mein Script sich nicht daran hält und es wie gewünscht auch macht (daher mein Source - und nochmal: funktioniert 1a)? Was ist der Unterschied zu jQuerys "dblclick" zu "ondblclick"? Ich versuche es nur nachzuvollziehen, wo der Unterschied liegt und warum der TO explizit darauf hingewiesen wurde, dass "onclick" und "ondblclick" sinnfrei wären. Ich bin der Meinung, dass mein Beispiel das Gegenteil zeigt (weil auf dem "single-click" was anderes liegt als beim "double-click"; also prinzipiell das, was der TO eigentlich plant) ...

Verständlicher? ^^

tsseh · 12. Juni 2014

SteelWheel schrieb:
Och, hesst, soooo oft konnte das noch gar nicht passieren!!!

doch, du hast einen eigenartigen stil

SteelWheel schrieb:
... und erwähnte "Doppelklick-Geschwindigkeiten".

die sind vom bs abhängig und spielen keine rolle

SteelWheel schrieb:
das würde aber (in meinem Fall) etwas anderes auslösen.

was? ein dragstart. gut

SteelWheel schrieb:
Wie "verbindlich" ist die Reihenfolge der Events (s. Julian)

alte ie weichen ab, aber spielt das eine rolle?

SteelWheel schrieb:
also, wenn mein Script sich nicht daran hält und es wie gewünscht auch macht

verstehe ich nicht

SteelWheel schrieb:
(daher mein Source - und nochmal: funktioniert 1a)?

warum sollte es denn nicht funktionieren?

SteelWheel schrieb:
Was ist der Unterschied zu jQuerys "dblclick" zu "ondblclick"?

keiner

SteelWheel schrieb:
Ich versuche es nur nachzuvollziehen, wo der Unterschied liegt und warum der TO explizit darauf hingewiesen wurde, dass "onclick" und "ondblclick" sinnfrei wären.

sinnfrei nicht, es kommen aber auch click-events bei doppelklicks. würde ich auch erwarten.

SteelWheel schrieb:
Ich bin der Meinung, dass mein Beispiel das Gegenteil zeigt (weil auf dem "single-click" was anderes liegt als beim "double-click"; also prinzipiell das, was der TO eigentlich plant) ...

es werden beide events ausgelöst, das ist nur problematisch, wenn der click-handler was macht, was beim doppelklick nicht passieren DARF.

SteelWheel schrieb:
Verständlicher? ^^

ja

j-l-n · 12. Juni 2014

hesst schrieb:
Zitat von SteelWheel:
... und erwähnte "Doppelklick-Geschwindigkeiten".

Zum Vergrößern anklicken....

die sind vom bs abhängig und spielen keine rolle

Doch, in diesem Fall schon. Und zwar insofern, wie hoch/niedrig ich den timeout ansetzte. Hier steht man vor dem folgenden Problem:

langer Timeout = auch bei langsamen Doppelklicks benutzbar <-> hohe Verzögerung für Singleclick-Event
kurzer Timeout = geringe Verzögerung für Singleclick-Event <-> eingeschränkte Usabilty, da nur schnelle Doppelklicks die Funktion aufrufen

Yogilein · 12. Juni 2014

Ich habe jetzt kapiert, dass Klick und Doppelklick auf einem Element nur unterschieden werden können, wenn ich die Klicks über eine Zeitschleife ermittle.

Muss ich dies jetzt auch für einen ganz normalen Doppelklick (also keine Unterscheidung Einfach- / Doppelklick) grundsätzlich in einem area-Element auch so machen. In meinen Test geht dort nämlich die normale Doppelklickabfrage nicht.

mikdoe · 12. Juni 2014

Yogilein schrieb:
Ich habe jetzt kapiert, dass Klick und Doppelklick auf einem Element nur unterschieden werden können, wenn ich die Klicks über eine Zeitschleife ermittle.

Ich weiß nicht. Wenn ich Steel richtig verstanden habe geht es wohl über die normalen Eventhandler und ist nur eine Frage der Reihenfolge ihrer Registrierung. Vielleicht dahingehend nochmal nachbohren/testen.

j-l-n · 12. Juni 2014

Yogilein schrieb:
Ich habe jetzt kapiert, dass Klick und Doppelklick auf einem Element nur unterschieden werden können, wenn ich die Klicks über eine Zeitschleife ermittle.

Also meiner Meinung nach eindeutig ja. Denn auch wenn man zuerst dblclick und dann erst click registriert - das kann logisch betrachtet nicht klappen. Jeder Doppelklick ist zugleich auch (zwei) Singleclick(s)...

Muss ich dies jetzt auch für einen ganz normalen Doppelklick (also keine Unterscheidung Einfach- / Doppelklick) grundsätzlich in einem area-Element auch so machen.

Nein, musst du nicht. Wozu würde es sonst das dblclick-Event überhaupt geben?

Yogilein · 12. Juni 2014

Nein, musst du nicht. Wozu würde es sonst das dblclick-Event überhaupt geben?

Und warum geht es bei mir nicht. Kann das vielleicht mal jemand ausprobieren? Es kann doch nicht sein, dass ich mich mehrmals beim Testen vertippert habe?

SteelWheel · 12. Juni 2014

@hesst: Ich habe das Talent, dass ich Gedankengänge nicht zwangsläufig vollends hier notiere - was dann schwierig beim Mitverfolgen wird. Ich versuche mich für Eindrücke Fremder zu bessern und konkreter Belange darzustellen ...

j-l-n · 12. Juni 2014

Worum geht es denn genau? Hast du vielleicht einmal einen Testlink oder den betreffenden Code?

Yogilein · 12. Juni 2014

E:\Homepages\YogiSpiele\Seiten\_temp_7a3a7e8.htm

Vergiss es, jetzt geht's. Ich möchte manchmal echt wissen, was für einen Schwachsinn ich beim Testen in die Tastatur haue. Aber gut, dass du gefragt hast und ich somit ein Beispiel zusammenbasteln wollte.

Aber noch einmal zu meiner anderen Frage: Muss ich im area-Element "href" angeben? Der Validator meint Ja. Aber wie bekomme ich bei allen! Browsern dann den hässlichen Rahmen weg, wenn ich z.B. href="javascript:void(0)" eingebe?

Klick und Doppelklick

Member

Moderator

j-l-n

Guest

Member

j-l-n

Guest

Moderator

Member

Moderator

New member

Lounge-Member

New member

Lounge-Member

j-l-n

Guest

Member

Moderator

j-l-n

Guest

Member

New member

j-l-n

Guest

Member