Funktion bei Doppelklick nicht ausführen

[Ghost109]

Guten Morgen !

ich habe folgenden Code Part:

<div onclick="nextStep()">Klick mich</div>

function nextStep() {
    console.log("TEST")
}

Klappt auch. Allerdings ist mir aufgefallen, dass wenn ich einen Doppelklick auf "klick mich" mache, dass die Funktion auch 2x hintereinander ausgeführt wird - verständlich.
Frage ist: Wie kann ich dies unterbinden ? Die Funktion darf nur auf einen "Klick" reagieren, nicht auf einen Doppelklick.

[hellbringer]

Entferne den Event Listener beim ersten Klick:

<button type="button">Klick mich</button>

<pre id="log"></pre>

const button = document.querySelector('button');

const clickListener = (event) => {
    event.preventDefault();
    document.querySelector('#log').textContent += 'Klick\n';
    button.removeEventListener('click', clickListener);
};

button.addEventListener('click', clickListener);

Demo: https://jsfiddle.net/c0dem0nkey/0wgy143a/

[Ghost109]

das wäre glaub ich nicht richtig.
Der Button soll ruhig mehrfach gedrückt werden können, aber nicht via Doppelklick

[hellbringer]

das wäre glaub ich nicht richtig.
Der Button soll ruhig mehrfach gedrückt werden können, aber nicht via Doppelklick

Ein Doppelklick sind nun mal zwei Klicks. Du müsstest den zweiten Klick ignorieren, wenn er in einem bestimmten Zeitraum stattfindet. Ich persönlich würde das mit einem debounceTime-Operator in einem rxjs-Observable lösen:

https://rxjs.dev/api/operators/debounceTime

Das ist recht praktisch, wenn man mal die Grundlagen von rxjs verstanden hat. Ansonsten muss man das halt selber nachprogrammieren. Oder man setzt einfach den Button für einen kurzen Zeitraum auf disabled:

const button = document.querySelector('button');

const clickListener = (event) => {
    event.preventDefault();

    document.querySelector('#log').textContent += 'Klick\n';

    button.disabled = true;
    setTimeout(() => {
        button.disabled = false;
    }, 500);
};

button.addEventListener('click', clickListener);

Demo: https://jsfiddle.net/c0dem0nkey/0wgy143a/1/

[Ghost109]

Das mit dem auf "disabled" setzen ist keine schlechte Idee !
Danke

[tomBuilder]

https://css-tricks.com/snippets/jque...ce-and-unbind/

Die Funktion darf nur auf einen "Klick" reagieren, nicht auf einen Doppelklick.