Benötigen Klick / mouseup Ereignisse aufzuheben, wenn Doppelklick Ereignis erkannt

Question

Wie wird das gemacht?

Answer 1

Das ist eine gute Frage, und ich glaube wirklich nicht, dass es leicht getan werden kann. ( einige Diskussionen auf dieser )

Wenn es Superduper wichtig für Sie, um diese Funktionalität zu haben, man könnte es hacken etwa so:

function singleClick(e) {
    // do something, "this" will be the DOM element
}

function doubleClick(e) {
    // do something, "this" will be the DOM element
}

$(selector).click(function(e) {
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            singleClick.call(that, e);
        }
    }, 300);
}).dblclick(function(e) {
    $(this).data('double', 2);
    doubleClick.call(this, e);
});

Und hier ist eine Beispiel davon bei der Arbeit .

Wie in den Kommentaren darauf hingewiesen, gibt es ein Plugin für das das tut, was ich oben ziemlich viel getan hat, aber Pakete, die für Sie, so dass Sie müssen das hässliche nicht sehen: FixClick .

Answer 2

Raymond Chen hat einige der Auswirkungen einzelner-versus diskutiert -double klicken - obwohl er im Kontext von Windows sprechen, was er sagt, ist relevant für Browser-basierte UI-Design

.

Grundsätzlich ist die Aktion auf einem Doppelklick genommen sollte eine logische Sache, nach einem einzigen Klick zu tun. So zum Beispiel, in einem Desktop-UI, wählt einzigen Klick ein Element, und doppelklicken Sie öffnet es (zum Beispiel die Datei öffnet, oder startet die Anwendung). Der Benutzer müßte die Datei auswählen, um sie zu öffnen wie auch immer, so spielt es keine Rolle, dass die einzige Klick Aktion vor den Doppelklick Maßnahmen ergriffen werden.

Wenn Sie eine UI-Komponente, deren Doppelklickaktion haben, ist völlig unabhängig von der einzigen Klick Aktion, so dass es notwendig wird, die einzige Klick Aktion zu verhindern, wenn das System erkennt, es war eigentlich ein Doppelklick, dann sollen Sie wirklich zu überdenken Ihr Design. Die Nutzer werden es umständlich und kontraintuitiv finden, dass es nicht in der Art und Weise handelt, wird sie verwendet werden, um Dinge handeln.

Wenn Sie immer noch so gehen wollen, dann müssen Sie entweder die Entprellung Technik verwenden (in diesem Fall alle einzigen Klick Aktionen verzögert wird) oder auch einen Mechanismus implementieren, wobei die Doppelklick-Handler die Arbeit durch das getan rückgängig gemacht Klick-Handler.

Sie sollten sich auch bewusst sein, dass einige Nutzer eine sehr lange Doppelklick auf Zeit eingestellt. Jemand mit zum Beispiel arthritische Hände könnten eine Doppelklick Zeit von mehr als ein zweiten Satz in ihren Systemeinstellungen haben, so dass die Entprellung Technik basierte auf einem beliebigen Zeitraum Ihrer Wahl wird Ihre UI-Komponente unzugänglich zu den Menschen machen, wenn die einzigen Klick Maßnahmen zu ergreifen schließt die Doppelklick Aktion. Die „ungeschehen machen, was gerade passiert ist auf Klick“ -Technik ist die einzige praktikable Abhilfe für dieses, soweit ich weiß.

Answer 3

Die Technik in den anderen Antworten skizziert ist bekannt als Entprellung .

Answer 4

jQuery Sparkle stellt eine saubere elegante Lösung für diese, durch eine Single benutzerdefiniertes Ereignis zu implementieren. Auf diese Weise können Sie es wie jedes andere Ereignis, so:

$('#el').singleclick(function(){});
// or event
$('#el').bind('singleclick', function(){});

Es bietet auch benutzerdefinierte Ereignisse für die letzten und ersten Klicks einer Reihe von Klicks. Und das lastclick benutzerdefinierte Ereignis passiert tatsächlich die Menge der Klicks zurück! So könnten Sie tun dies!

$('#el').lastclick(function(event,clicks){
    if ( clicks === 3 ) alert('Tripple Click!');
});

Sie können den Quellcode finden Sie das benutzerdefinierte Ereignis für die Definition hier .

Es ist Open Source unter der AGPL-Lizenz, so können Sie sich frei fühlen zu greifen, was Sie davon brauchen Sorgen frei! :-) auch an einem Tag zu Tag aktiv entwickelt Es ist so dass Sie nie auf Unterstützung kurz sein.

Vor allem aber ist es ein DRY Plugin / Effect Framework ermöglicht es Ihnen, Plug-in und Erweiterungen viel leichter zu entwickeln. So hofft, das hilft, dieses Ziel zu erreichen!

Answer 5

Wenn dies für eine Schaltfläche ist, ein Formular (was nicht unbedingt der Fall für das ursprüngliche Plakat, kann jedoch der Fall für andere Menschen bekommen hier über Google), eine einfachere Möglichkeit wäre, das Element zu deaktivieren, die sein wird, geklickt haben in Ihrem Click-Ereignishandler:

$(selector).click(function(e) {
    $(this).prop('disable', true);
}