Jquery Bind Doppelklick und Einzelklick getrennt

96

Gibt es etwas in jquery, mit dem ich zwischen Doppelklick- und Einzelklickverhalten unterscheiden kann?

Wenn ich beide an dasselbe Element binde, wird nur der einzelne Klick ausgeführt.

Gibt es eine Möglichkeit, einige Zeit zu warten, bevor der einzelne Klick ausgeführt wird, um festzustellen, ob der Benutzer erneut klickt oder nicht?

Vielen Dank :)

kritya
quelle

Antworten:

143

Ich stellte fest, dass John Stricklers Antwort nicht ganz das tat, was ich erwartet hatte. Sobald die Warnung durch einen zweiten Klick innerhalb des Zwei-Sekunden-Fensters ausgelöst wird, löst jeder nachfolgende Klick eine weitere Warnung aus, bis Sie zwei Sekunden warten, bevor Sie erneut klicken. Bei Johns Code fungiert ein Dreifachklick als zwei Doppelklicks, bei denen ich erwarten würde, dass er sich wie ein Doppelklick gefolgt von einem einzelnen Klick verhält.

Ich habe seine Lösung überarbeitet, um auf diese Weise zu funktionieren und auf eine Weise zu fließen, die mein Verstand besser verstehen kann. Ich habe die Verzögerung von 2000 auf 700 gesenkt, um besser zu simulieren, was ich als normale Empfindlichkeit empfinde. Hier ist die Geige: http://jsfiddle.net/KpCwN/4/ .

Danke für die Gründung, John. Ich hoffe, diese alternative Version ist für andere nützlich.

var DELAY = 700, clicks = 0, timer = null;

$(function(){

    $("a").on("click", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter

            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("Double Click");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });

});
Girlanden-Papst
quelle
1
Verwenden Sie jedoch .delegate () über .live ().
John Strickler
23
Verwenden .on()Sie jetzt über beide
Claudiu
2
Die Verwendung dieser Lösung verzögert das Klickereignis in 700 ms! Es ist sehr ärgerlich für Benutzer ...
Uriel
1
@uriel, wenn Sie der Meinung sind, dass 700 ms zu lang sind, um auf einen Doppelklick zu warten, verkleinern Sie die Zahl, bis sie Ihren Wünschen entspricht.
Garland Pope
1
ab jQuery 1.7: Um später geladene Inhalte (Ajax-Inhalte) zu unterstützen, verwenden Sie $("document").on("click","a" function(e){stattdessen in Zeile 5. Dieses Konstrukt ersetzt die veraltete delegate()Verwendung. Anstelle von documentkönnen / sollten Sie jedes übergeordnete Objekt des aDOM so weit wie möglich verwenden, das über die Zeit bestehen bleibt.
Hafenkranich
15

Die von "Nott Responding" gegebene Lösung scheint beide Ereignisse auszulösen, klicken und doppelklicken, wenn Sie doppelt klicken. Ich denke jedoch, dass es in die richtige Richtung weist.

Ich habe eine kleine Änderung vorgenommen, dies ist das Ergebnis:

$("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass('clicked')){
        $this.removeClass('clicked'); 
        alert("Double click");
        //here is your code for double click
    }else{
        $this.addClass('clicked');
        setTimeout(function() { 
            if ($this.hasClass('clicked')){
                $this.removeClass('clicked'); 
                alert("Just one click!");
                //your code for single click              
            }
        }, 500);          
    }
});

Versuch es

http://jsfiddle.net/calterras/xmmo3esg/

Calterras
quelle
10

Sicher, binden Sie zwei Handler, einen an clickund den anderen an dblclick. Erstellen Sie eine Variable, die bei jedem Klick inkrementiert wird. wird dann nach einer eingestellten Verzögerung zurückgesetzt. Innerhalb der setTimeout-Funktion können Sie etwas tun ...

var DELAY = 2000,
    clicks = 0,
    timer = null;

$('a').bind({
    click: function(e) {
        clearTimeout(timer);

        timer = setTimeout(function() {
            clicks = 0;
        }, DELAY);

        if(clicks === 1) {
            alert(clicks);
             //do something here

            clicks = 0;
        }

        //Increment clicks
        clicks++;
    },
    dblclick: function(e) {
        e.preventDefault(); //don't do anything
    }
});
John Strickler
quelle
Vielen Dank. Ich habe versucht, das if (clicks == 1) hinzuzufügen, aber es konnte nicht. Bitte fügen Sie die Single-Click-Funktion hinzu. Nochmals
vielen
@kritya Ich habe meine Antwort bearbeitet - das sollte für dich besser funktionieren. Siehe Geige hier - jsfiddle.net/VfJU4/1
John Strickler
OOOOh, ich habe verstanden, wo ich falsch lag. Ich habe das nicht gesagt. Da ich süchtig nach Traumweber war, hat es es nicht hervorgehoben: P wtv Danke :)
kritya
9

Sie könnten wahrscheinlich Ihre eigene benutzerdefinierte Implementierung von click / dblclick schreiben, damit diese auf einen zusätzlichen Klick wartet. Ich sehe in den jQuery-Kernfunktionen nichts, was Ihnen dabei helfen könnte.

Zitat aus .dblclick () auf der jQuery-Site

Es wird nicht empfohlen, Handler für dasselbe Element an die Ereignisse click und dblclick zu binden. Die Reihenfolge der ausgelösten Ereignisse variiert von Browser zu Browser, wobei einige zwei Klickereignisse vor dem dblclick empfangen und andere nur eines. Die Doppelklickempfindlichkeit (maximale Zeit zwischen Klicks, die als Doppelklick erkannt wird) kann je nach Betriebssystem und Browser variieren und ist häufig vom Benutzer konfigurierbar.

Mick Hansen
quelle
4

Schauen Sie sich den folgenden Code an

$("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass('clicked')){
        alert("Double click");
        //here is your code for double click
        return;
    }else{
         $this.addClass('clicked');
        //your code for single click
         setTimeout(function() { 
                 $this.removeClass('clicked'); },500);
    }//end of else
});

Demo geht hier http://jsfiddle.net/cB484/

Muhammad Tahir
quelle
4
Ich mag deine Idee, eine Klasse hinzuzufügen und sie als Zählung zu verwenden.
Nikil
wenn Sie Alert () hinzufügen; Anstelle von // Ihrem Code für einen einzelnen Klick funktioniert er überhaupt nicht
Entwickler
4

Ich habe ein jQuery-Plugin geschrieben, mit dem auch die Click- und Dblclick-Ereignisse delegiert werden können

// jQuery plugin to bind both single and double click to objects
// parameter 'delegateSelector' is optional and allow to delegate the events
// parameter 'dblclickWait' is optional default is 300
(function($) {
$.fn.multipleClicks = function(delegateSelector, clickFun, dblclickFun, dblclickWait) {
    var obj;
    if (typeof(delegateSelector)==='function' && typeof(clickFun)==='function') {
        dblclickWait = dblclickFun; dblclickFun = clickFun; clickFun = delegateSelector; delegateSelector = null; // If 'delegateSelector' is missing reorder arguments
    } else if (!(typeof(delegateSelector)==='string' && typeof(clickFun)==='function' && typeof(dblclickFun)==='function')) {
        return false;
    }
    return $(this).each(function() {
        $(this).on('click', delegateSelector, function(event) {
            var self = this;
            clicks = ($(self).data('clicks') || 0)+1;
            $(self).data('clicks', clicks);
            if (clicks == 1) {
                setTimeout(function(){
                    if ($(self).data('clicks') == 1) {
                        clickFun.call(self, event); // Single click action
                    } else {
                        dblclickFun.call(self, event); // Double click action
                    }
                    $(self).data('clicks', 0);
                }, dblclickWait || 300);
            }
        });
    });
};
})(jQuery);
IlNidoDelChiurlo
quelle
Dieses Plugin ist großartig! Aber irgendwie scheint es in IE9 nicht zu funktionieren? Ich mag keine älteren Versionen (und Sie sollten heutzutage IMO nicht mehr), aber ich versuche, zumindest auf IE9 Funktionalität zu erreichen - dies ist der Browser, den jeder haben kann (keine Betriebssystembeschränkungen) und der eine gute JS-Unterstützung bietet.
Dennis98
Verwendung:$("body").multipleClicks('#mySelector', function(){ /* do something on click */},function(){/* do something on doubleclick */},300);
Hafenkranich
Dieser eigentlich können Sie verwenden beide - klicken und gleichzeitig für verschiedene Aktionen Doppelklick-. Danke dir! Das funktioniert wie ein Zauber.
Hafenkranich
3
var singleClickTimer = 0; //define a var to hold timer event in parent scope
jqueryElem.click(function(e){ //using jquery click handler
    if (e.detail == 1) { //ensure this is the first click
        singleClickTimer = setTimeout(function(){ //create a timer
            alert('single'); //run your single click code
        },250); //250 or 1/4th second is about right
    }
});

jqueryElem.dblclick(function(e){ //using jquery dblclick handler
    clearTimeout(singleClickTimer); //cancel the single click
    alert('double'); //run your double click code
});
Gregory Ray
quelle
Einfach und effektiv. +1
Bruce Pierson
3

Ich implementiere diese einfache Lösung, http://jsfiddle.net/533135/VHkLR/5/
HTML-Code

<p>Click on this paragraph.</p>
<b> </b>

Skriptcode

var dbclick=false;    
$("p").click(function(){
setTimeout(function(){
if(dbclick ==false){
$("b").html("clicked")
}

},200)

}).dblclick(function(){
dbclick = true
$("b").html("dbclicked")
setTimeout(function(){
dbclick = false


},300)
});


Es ist nicht viel nachlässig

Chetan Sandeep Renu
quelle
2

Diese Lösung funktioniert bei mir

var DELAY = 250, clicks = 0, timer = null;

$(".fc-event").click(function(e) {
    if (timer == null) {
        timer = setTimeout(function() {
           clicks = 0;
            timer = null;
            // single click code
        }, DELAY);
    }

    if(clicks === 1) {
         clearTimeout(timer);
         timer = null;
         clicks = -1;
         // double click code
    }
    clicks++;
});
Vitali Korol
quelle
0

Ich habe hier einige Änderungen an den obigen Antworten vorgenommen, die immer noch hervorragend funktionieren: http://jsfiddle.net/arondraper/R8cDR/

azzy81
quelle
0
(function($){

$.click2 = function (elm, o){
    this.ao = o;
    var DELAY = 700, clicks = 0;
    var timer = null;
    var self = this;

    $(elm).on('click', function(e){
        clicks++;
        if(clicks === 1){
            timer = setTimeout(function(){
                self.ao.click(e);
            }, DELAY);
        } else {
            clearTimeout(timer);
            self.ao.dblclick(e);
        }
    }).on('dblclick', function(e){
        e.preventDefault();
    });

};

$.click2.defaults = { click: function(e){}, dblclick: function(e){} };

$.fn.click2 = function(o){
    o = $.extend({},$.click2.defaults, o);
    this.each(function(){ new $.click2(this, o); });
    return this;
};

})(jQuery);

Und schließlich verwenden wir als.

$("a").click2({
    click : function(e){
        var cid = $(this).data('cid');
        console.log("Click : "+cid);
    },
    dblclick : function(e){
        var cid = $(this).data('cid');
        console.log("Double Click : "+cid);
    }
});
Sergio FG
quelle
Was ist der Unterschied zwischen $ .click und $ .fn.click?
FrenkyB
0

Entspricht der obigen Antwort, ermöglicht jedoch einen Dreifachklick. (Verzögerung 500) http://jsfiddle.net/luenwarneke/rV78Y/1/

    var DELAY = 500,
    clicks = 0,
    timer = null;

$(document).ready(function() {
    $("a")
    .on("click", function(e){
        clicks++;  //count clicks
        timer = setTimeout(function() {
        if(clicks === 1) {
           alert('Single Click'); //perform single-click action
        } else if(clicks === 2) {
           alert('Double Click'); //perform single-click action
        } else if(clicks >= 3) {
           alert('Triple Click'); //perform Triple-click action
        }
         clearTimeout(timer);
         clicks = 0;  //after action performed, reset counter
       }, DELAY);
    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });
});
Luen
quelle
0

Dies ist eine Methode, die Sie mit dem grundlegenden JavaScript ausführen können, das für mich funktioniert:

var v_Result;
function OneClick() {
    v_Result = false;
    window.setTimeout(OneClick_Nei, 500)
    function OneClick_Nei() {
        if (v_Result != false) return;
        alert("single click");
    }
}
function TwoClick() {
    v_Result = true;
    alert("double click");
}
user3781586
quelle
0

Unten ist meine einfache Herangehensweise an das Problem.

JQuery-Funktion:

jQuery.fn.trackClicks = function () {
    if ($(this).attr("data-clicks") === undefined) $(this).attr("data-clicks", 0);

    var timer;
    $(this).click(function () {
        $(this).attr("data-clicks", parseInt($(this).attr("data-clicks")) + 1);

        if (timer) clearTimeout(timer);

        var item = $(this);
        timer = setTimeout(function() {
            item.attr("data-clicks", 0);
        }, 1000);
    });
}

Implementierung:

$(function () {
    $("a").trackClicks();

    $("a").click(function () {
        if ($(this).attr("data-clicks") === "2") {
            // Double clicked
        }
    });
});

Überprüfen Sie das angeklickte Element in Firefox / Chrome, um festzustellen, ob die Datenklicks beim Klicken auf und ab gehen. Passen Sie die Zeit (1000) entsprechend an.

mhapps
quelle