Dreifachklick-Ereignis

$.event.special.tripleclick = {

    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler)
    },

    handler: function(event) {
        var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0;
        clicks += 1;
        if ( clicks === 3 ) {
            clicks = 0;

            // set event type to "tripleclick"
            event.type = "tripleclick";
            
            // let jQuery handle the triggering of "tripleclick" event handlers
            jQuery.event.handle.apply(this, arguments)  
        }
        $elem.data('clicks', clicks);
    }
    
};

Verwendung

$("#whatever").bind("tripleclick", function() {
   // do something
}

Kommentare

Eric

# 11. Mai 2011

Funktioniert gut, bis auf 1 Problem;

Wenn man 1x klickt, dann mit der Maus über die Seite fährt, dann wieder zurückklickt, dann wieder abfährt, dann wieder zurück, feuert es immer noch, solange es 3 Klicks darauf gab. Das ist nicht wirklich ein Dreifachklick hintereinander, es ist eher „solange es 3 Klicks bekommt…“

Wie wäre es, wenn man ein mouseout-Ereignis bindet, das die Klicks wieder auf 0 zurücksetzt, wann immer die Maus vom Objekt wegfährt?

Antworten

Heiliger Bimbam

# 28. Juni 2011

Gibt es eine Möglichkeit, diese speziellen Ereignisse zurückzusetzen und das DOM mit einer Art Clear-Link zurückzusetzen, damit es sich neu aufbaut?

Ich verwende das Dreifachklick-Ereignis, um jemandem zu erlauben, dreimal auf ein Bild zu klicken, und dann werden die X,Y-Koordinaten für jeden Klick in ein Textfeld eingegeben.

Das Problem, das ich habe, ist, wenn der Benutzer einen Fehler macht und von vorne beginnen möchte. Ich kann das Ereignis nicht zerstören und es sich dann zurücksetzen lassen, damit es wieder für den Benutzer funktioniert. Es zerstört das Ereignis, aber die Klicks werden immer noch ausgeführt und in mein verstecktes Eingabefeld eingetragen. Argh :)

Der einzige Weg, den ich herausfinden kann, um dies zu tun, ist, das Formular abzusenden, nachdem es geleert wurde, damit es einen Null-Input-Fehler auslöst, der dann die Seite neu zeichnet und aufgrund der Validierung wieder von vorne beginnt. Ich habe versucht, das Ereignis zu entbinden und zu zerstören, aber die Klicks funktionieren immer noch und gehen in mein verstecktes Eingabeformular. Argh :)
Ben Alman hat eine großartige Abhandlung über spezielle Ereignisse, aber sie scheint mir zu lang zu sein, als dass ich geduldig genug wäre, sie vollständig zu lesen.

Antworten

Rafael Coelho

# 3. August 2011

Hey, nette Funktion, wegen des Problems habe ich eine einfache Korrektur gefunden

fügen Sie die folgende Zeile direkt nach „clicks += 1;“ ein

setTimeout(function(){ clicks=0; $elem.data(‘clicks’,0); },500);

Ich schätze die Funktion wirklich, Danke!

Antworten

Hoed

# 28. Juni 2012

Ich habe es ein wenig angepasst, damit man innerhalb einer Sekunde dreimal klicken muss.

Hoffentlich ist es nützlich


$.event.special.tripleclick = {

    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler)
    },

    handler: function(event) {
        var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0, start = $elem.data('startTimeTC') || 0;
        if ((new Date().getTime() - start)>= 1000) {
            clicks = 0;
        }
        clicks += 1;
        if(clicks === 1) {
            start = new Date().getTime();
        }
        
        if ( clicks === 3 ) {
            clicks = 0;

            // set event type to "tripleclick"
            event.type = "tripleclick";
            
            // let jQuery handle the triggering of "tripleclick" event handlers
            jQuery.event.handle.apply(this, arguments)  
        }
        
        $elem.data('clicks', clicks);
        $elem.data('startTimeTC', start);
    }
    
};

Antworten

Jason Robinson

# 10. April 2013

Super, danke! Ich habe am Ende die Version von @Hoed verwendet, musste aber folgende Änderung vornehmen:

jQuery.event.handle.apply(this, arguments)

Ändere zu

$elem.trigger('tripleclick');

jQuery.event.handle gab bei mir undefined zurück, aber ich habe es zum Laufen gebracht, indem ich diese Änderung vorgenommen habe. Irgendwelche Ideen, warum? :) Wie auch immer, falls jemand auf die gleiche Situation stößt.

Antworten

Deliaz

# 21. Dezember 2014

Ich habe ein jQuery-Plugin erstellt, das ein echtes Dreifachklick-Ereignis implementiert
https://github.com/Deliaz/jquery-trplclick

Wenn ich „echtes Ereignis“ sagte, meine ich, dass das ‚trplclick‘-Ereignis nur ausgelöst wird, wenn alle drei Klicks mit demselben Intervall ausgeführt werden.

Antworten

noam

# 27. August 2019

in der Zeile
jQuery.event.handle.apply(this, arguments)

handle ist veraltet und sollte dispatch verwenden
jQuery.event.dispatch.apply(this, arguments)

Antworten

Verwendung

Kommentare

Hinterlasse eine Antwort Antwort abbrechen