wake-up-neo.net

Sie müssen Click/Mouseup-Ereignisse abbrechen, wenn ein Doppelklick-Ereignis erkannt wird

Wie wird das gemacht?

41
Daddy Warbox

Dies ist eine gute Frage, und ich glaube nicht, dass dies leicht zu bewerkstelligen ist. ( Einige Diskussionen dazu )

Wenn es für Sie äußerst wichtig ist, diese Funktionalität zu haben, können Sie diese so hacken:

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 ein Beispiel davon bei der Arbeit .

Wie in den Kommentaren darauf hingewiesen, gibt es dafür ein Plugin, das das, was ich oben gemacht habe, ziemlich gut macht, es jedoch für Sie zusammenpackt, damit Sie nicht das Hässliche sehen müssen: FixClick .

76

Raymond Chen hat einige der Implikationen von Single-versus-Doppelklick diskutiert - obwohl er im Kontext von Windows spricht, ist das, was er sagt, relevant für das browserbasierte UI-Design.

Grundsätzlich sollte die durch einen Doppelklick durchgeführte Aktion nach einem einzigen Klick logisch sein. So wählt zum Beispiel in einer Desktop-Benutzeroberfläche ein Einzelklick ein Element aus, und ein Doppelklick öffnet es (öffnet beispielsweise die Datei oder startet die Anwendung). Der Benutzer müsste die Datei trotzdem auswählen, um sie trotzdem zu öffnen, sodass es keine Rolle spielt, dass die Einzelklickaktion vor der Doppelklickaktion ausgeführt wird.

Wenn Sie eine UI-Komponente haben, deren Doppelklick-Aktion völlig unabhängig von der Einzelklick-Aktion ist, so dass die Einzelklick-Aktion zu verhindern ist, sobald das System feststellt, dass es sich tatsächlich um einen Doppelklick handelt, müssen Sie Ihre Ansicht wirklich überdenken Design. Benutzer werden es als unangenehm und kontraintuitiv empfinden, da es sich nicht so verhält, wie sie es gewohnt sind, Dinge zu benehmen.

Wenn Sie immer noch auf diese Weise vorgehen möchten, müssen Sie entweder die Entprellungstechnik verwenden (in diesem Fall werden alle Einzelklickaktionen verzögert), oder Sie müssen einen Mechanismus implementieren, durch den der Doppelklickhandler die Arbeit des Einzelklickhandlers rückgängig macht .

Sie sollten auch wissen, dass einige Benutzer eine sehr lange Doppelklickzeit festlegen. Eine Person mit beispielsweise arthritischen Händen verfügt möglicherweise über eine Doppelklickzeit von mehr als einer Sekunde in ihren Systemeinstellungen, sodass die Entprellungstechnik, die auf einem beliebigen Zeitraum Ihrer Wahl basiert, dazu führt, dass Ihre UI-Komponente für diese Personen nicht zugänglich ist Wenn Sie die Einzelklickaktion ausführen, kann die Doppelklickaktion nicht ausgeführt werden. Das "Undo, was gerade mit einem Klick geschehen ist" ist die einzige praktikable Lösung, soweit ich weiß.

32
NickFitz

Die in den anderen Antworten beschriebene Technik wird als Entprellung bezeichnet.

7
Walter Rumsby

jQuery Sparkle bietet eine saubere, elegante Lösung, indem ein benutzerdefiniertes Ereignis mit einem Klick implementiert wird. Auf diese Weise können Sie es wie jedes andere Ereignis verwenden.

$('#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 benutzerdefinierte Ereignis bei lastclick gibt tatsächlich die Anzahl der Klicks zurück! Du könntest das also machen!

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

Den Quellcode zur Definition des benutzerdefinierten Ereignisses finden Sie hier .

Es ist Open Source unter der AGPL-Lizenz, so dass Sie sich frei und unkompliziert das, was Sie brauchen, entnehmen können! :-) Es wird auch täglich aktiv weiterentwickelt, so dass Ihnen die Unterstützung nie fehlen wird.

Am wichtigsten ist jedoch ein DRY Plugin/Effect Framework, mit dem Sie Plugins und Erweiterungen viel einfacher entwickeln können. Ich hoffe, das hilft, dieses Ziel zu erreichen!

1
balupton

Wenn es sich um eine Schaltfläche handelt, die ein Formular sendet (was nicht unbedingt der Fall für das Originalposter ist, aber für andere Personen, die über Google hierher kommen), ist die einfachere Option das Deaktivieren des Elements, auf das geklickt wird Ihr Click-Event-Handler:

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