Doppelklick vermeiden (bei OnClick event)

**PHP-Desaster** · 26.04.2009, 15:15

Merken, ob die Funktion bereits aufgerufen wurde und entsprechend terminieren. Soll die Funktion mehrfach ausgeführt werden, nur halt dieser Doppelklickeffekt vermieden werden, Zeitstempel merken und nicht innerhalb von einer Sekunde mehrmals ausführen. Oder in der Funktion den onclick-Eventhandler entfernen und per window.setTimeout wieder anfügen.

**fabio** · 26.04.2009, 15:25

hm, das wäre ne interessante idee, den onClick-handler zu entfernen.

problem evt nur, dass das <li> eine ID hat, das <a> ja aber nicht.
komm ich da trotzdem an das <a> ran?

**TobiaZ** · 26.04.2009, 15:28

Zunächst mal, warum verwendest du einen Link, wenn du das onclick event auch direkt dem Image zuweisen kannst.

Was dein Problem angeht, so verhält es sich wie folgt:

PHP-Code:


<html>



<body>

<p onclick="hoch()" ondblclick="doppel();">hochzählen</p>

<p onclick="zeige()">zeige</p>



<script>

i = 0;

j = 0;



function hoch() {

i++;

}



function doppel() {

j++;

}



function zeige() {

alert("i: " + i + " - j: " + j);

}

</script>



</body>

</html>

Aber es spricht ja nichts dagegen, in der onclick funktion eine abfrage einzubauen.

EDIT:
Mein erster Suchtreffer bringt übrigens das hier: http://forum.de.selfhtml.org/archiv/2006/3/t126626/
Was hast du gefunden?

**TobiaZ** · 26.04.2009, 15:30

problem evt nur, dass das <li> eine ID hat, das <a> ja aber nicht. komm ich da trotzdem an das <a> ran?

Klar! Ist doch ein Kindknoten!

Aber wie gesagt, das <a> hat da gar nichts zu suchen!

**fabio** · 26.04.2009, 15:31

Original geschrieben von TobiaZ
[B]Zunächst mal, warum verwendest du einen Link, wenn du das onclick event auch direkt dem Image zuweisen kannst.

hm, gute Frage, hab irgendwie ganz vergessen, dass bilder direkt den OnClick annehmen können.

gut, die frage hat sich erledigt, ich habe jetzt in der funktion die onclick handler entfernt, so dass es nur einmal klickbar ist

Danke, darf geschlossen werden

**onemorenerd** · 26.04.2009, 15:31

Einfach vorm Aufruf der Funktion den onClick-Handler lösen.

<a href="..." onclick="this.onclick = null; yourFunc();">...</a>

Falls du den Handler dynamisch bindest, muss das element.onclick = null eben in der Funktion selbst stattfinden.

<a href="..." onclick="yourFunc(this);">...</a>

Vergiss aber nicht, den Handler wieder zu binden, wenn das Item von der Merkliste entfernt wird.

Übrigens ist das a-Tag nicht wirklich überflüssig. Es kann einen Non-JS-Fallback sein.

**TobiaZ** · 26.04.2009, 15:36

Original geschrieben von onemorenerd
ich überflüssig. Es kann einen Non-JS-Fallback sein.

Ja ne, ist klar...

a href='java script:void();'

**onemorenerd** · 26.04.2009, 15:40

Ok, ich formuliere es mal anders: Das a-Tag darf nicht überflüssig sein. Entweder ist es ein Fallback für Leute ohne JS - dann steht da natürlich kein JS im href - oder es muss ganz weg.

**h3ll** · 26.04.2009, 15:44

Möglichkeit 1:

Code:

<html>
<head><title>foobar</title></head>
<script type="text/javascript">

var count_last_click = 0;

function count() {
	var now = new Date();
	if (now.getTime() < count_last_click + 1000) {
		return;
	}
	count_last_click = now.getTime();

	document.getElementById('counter').innerHTML++;
}
</script>
<body>
<a href="#" onclick="count(); return false;">count</a>
<div id="counter">0</div>
</body>
</html>

Möglichkeit 2:

Code:

<html>
<head><title>foobar</title></head>
<script type="text/javascript">
function count() {
	document.getElementById('counter').innerHTML++;
}
</script>
<body>
<a href="#" onclick="count(); return false;">count</a>
<div id="counter">0</div>
<strong>Bitte nur einmal klicken!</strong>
</body>
</html>

Doppelklick vermeiden (bei OnClick event)