webentwicklung-frage-antwort-db.com.de

Wie kann ein Doppelklick mit jQuery verhindert werden?

Ich habe einen Button als solchen:

<input type="submit" id="submit" value="Save" />

In jQuery verwende ich Folgendes, aber es sind noch immer Doppelklicks möglich:

<script type="text/javascript">

$(document).ready(function () {

    $("#submit").one('click', function (event) {  

Irgendeine Idee, wie ich Doppelklick verhindern kann?

51
Nate Pet

jQuery's one () löst den angefügten Event-Handler einmal für jedes gebundene Element aus und entfernt dann den Event-Handler. 

Wenn aus irgendeinem Grund die Anforderungen nicht erfüllt werden, kann die Schaltfläche auch vollständig deaktiviert werden, nachdem sie angeklickt wurde.

$(document).ready(function () {
     $("#submit").one('click', function (event) {  
           event.preventDefault();
           //do something
           $(this).prop('disabled', true);
     });
});

Es sollte beachtet werden, dass die Verwendung der ID submit Probleme verursachen kann, da die form.submit-Funktion mit einem Verweis auf dieses Element überschrieben wird.

63
adeneo

Nur noch eine Lösung:

$('a').on('click', function(e){
    var $link = $(e.target);
    e.preventDefault();
    if(!$link.data('lockedAt') || +new Date() - $link.data('lockedAt') > 300) {
        doSomething();
    }
    $link.data('lockedAt', +new Date());
});

Hier speichern wir die Zeit des letzten Klicks als Datenattribut und prüfen dann, ob der vorherige Klick mehr als 0,3 Sekunden zurückliegt. Wenn es falsch ist (vor weniger als 0,3 Sekunden), aktualisieren Sie einfach die letzte Klickzeit. Wenn ja, tun Sie etwas.

jsbin

21
Kichrum

Ich habe festgestellt, dass die meisten Lösungen nicht mit Klicks auf Elemente wie Labels oder DIVs funktionierten (z. B. bei Verwendung von Kendo-Steuerelementen). Also habe ich diese einfache Lösung gemacht:

function isDoubleClicked(element) {
    //if already clicked return TRUE to indicate this click is not allowed
    if (element.data("isclicked")) return true;

    //mark as clicked for 1 second
    element.data("isclicked", true);
    setTimeout(function () {
        element.removeData("isclicked");
    }, 1000);

    //return FALSE to indicate this click was allowed
    return false;
}

Verwenden Sie es an dem Ort, an dem Sie entscheiden möchten, ob Sie eine Veranstaltung starten möchten oder nicht:

$('#button').on("click", function () {
    if (isDoubleClicked($(this))) return;

    ..continue...
});
16
roberth

Meine Lösung: https://Gist.github.com/pangui/86b5e0610b53ddf28f94 Es verhindert Doppelklick, akzeptiert aber nach 1 Sekunde mehr Klicks. Ich hoffe es hilft.

Hier ist der Code:

jQuery.fn.preventDoubleClick = function() {
  $(this).on('click', function(e){
    var $el = $(this);
    if($el.data('clicked')){
      // Previously clicked, stop actions
      e.preventDefault();
      e.stopPropagation();
    }else{
      // Mark to ignore next click
      $el.data('clicked', true);
      // Unmark after 1 second
      window.setTimeout(function(){
        $el.removeData('clicked');
      }, 1000)
    }
  });
  return this;
}; 
12
Pangui

In meinem Fall hatte jQuery one einige Nebenwirkungen (in IE8) und ich verwendete am Ende Folgendes:

$(document).ready(function(){
  $("*").dblclick(function(e){
    e.preventDefault();
  });
});

das funktioniert sehr schön und sieht einfacher aus. Fand es dort: http://www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html

11
Etienne

fügen Sie diese Methode einfach in Ihre Formulare ein, dann werden Doppelklicks oder mehr Klicks auf einmal verarbeitet. Nach dem Senden der Anfrage wird die erneute und erneute Anfrage nicht mehr zugelassen.

<script type="text/javascript">
    $(document).ready(function(){
            $("form").submit(function() {
                $(this).submit(function() {
                    return false;
                });
                return true;
            }); 
    }); 
</script>

es wird dir sicher helfen.

3
Bachas

Ich habe das ähnliche Problem. Sie können setTimeout () verwenden, um das Doppelklicken zu vermeiden.

//some codes here above after the click then disable it

// Überprüfen Sie auch hier, ob ein Attribut deaktiviert ist

// Wenn im btn-Tag ein Attribut deaktiviert ist, dann // Rückkehr. Wandle das in js um.

$('#btn1').prop("disabled", true);

setTimeout(function(){
    $('#btn1').prop("disabled", false);
}, 300);
2
user3856437

Was ich herausfand, war eine alte, aber funktionierende Lösung für moderne Browser. Funktioniert beim Doppelklick nicht zwischen Klassen wechseln.

$('*').click(function(event) {
    if(!event.detail || event.detail==1){//activate on first click only to avoid hiding again on double clicks
        // Toggle classes and do functions here
        $(this).slideToggle();
    }
});
1

Dies ist mein allererster Beitrag und ich bin sehr unerfahren, also bitte lass es mich gut gehen, aber ich glaube, ich habe einen gültigen Beitrag, der für jemanden hilfreich sein könnte ...

Manchmal benötigen Sie ein sehr großes Zeitfenster zwischen wiederholten Klicks (z. B. ein E-Mail-Link, bei dem die E-Mail-App einige Sekunden benötigt, um geöffnet zu werden, und Sie möchten nicht, dass sie erneut ausgelöst wird) Benutzer an anderer Stelle. Meine Lösung ist, Klassennamen für die Links abhängig vom Ereignistyp zu verwenden, während die Doppelklick-Funktion an anderer Stelle beibehalten wird.

var controlspeed = 0;

$(document).on('click','a',function (event) {
    eventtype = this.className;
    controlspeed ++;
    if (eventtype == "eg-class01") {
        speedlimit = 3000;
    } else if (eventtype == "eg-class02") { 
        speedlimit = 500; 
    } else { 
        speedlimit = 0; 
    } 
    setTimeout(function() {
        controlspeed = 0;
    },speedlimit);
    if (controlspeed > 1) {
        event.preventDefault();
        return;
    } else {

        (usual onclick code goes here)

    }
});
1
ma5k
/*
Double click behaves as one single click


"It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable."

That way we have to check what is the event that is being executed at any sequence. 

   */
       var totalClicks = 1;

 $('#elementId').on('click dblclick', function (e) {

 if (e.type == "dblclick") {
    console.log("e.type1: " + e.type);
    return;
 } else if (e.type == "click") {

    if (totalClicks > 1) {
        console.log("e.type2: " + e.type);
        totalClicks = 1;
        return;
    } else {
        console.log("e.type3: " + e.type);
        ++totalClicks;
    }

    //execute the code you want to execute
}

});

Wenn Sie wirklich mehrere Formularübergaben vermeiden möchten und nicht nur Doppelklicks verhindern möchten, kann die Verwendung von jQuery one () für das Klickereignis einer Schaltfläche problematisch sein, wenn es eine clientseitige Überprüfung gibt (z. B. Textfelder, die als erforderlich markiert sind). Das liegt daran, dass Click die clientseitige Validierung auslöst. Wenn die Validierung fehlschlägt, können Sie die Schaltfläche nicht erneut verwenden. Um dies zu vermeiden, kann one () immer noch direkt beim Übermittlungsereignis des Formulars verwendet werden. Dies ist die sauberste jQuery-basierte Lösung, die ich dafür gefunden habe:

<script type="text/javascript">
$("#my-signup-form").one("submit", function() {
    // Just disable the button.
    // There will be only one form submission.
    $("#my-signup-btn").prop("disabled", true);
});
</script>
0
regiov

"Kinderleicht"

$(function() {
     $('.targetClass').dblclick(false);
});
0
user3852812

Ich hatte ein ähnliches Problem, aber das Deaktivieren der Schaltfläche hat den Trick nicht ganz erfüllt. Es gab einige andere Aktionen, die ausgeführt wurden, als auf die Schaltfläche geklickt wurde, und manchmal wurde die Schaltfläche nicht früh genug deaktiviert, und wenn der Benutzer doppelt klickte, wurden zwei Ereignisse ausgelöst.
Ich nahm Panguis Timeout-Idee und kombinierte beide Techniken, deaktivierte den Button und fügte für alle Fälle ein Timeout hinzu. Und ich habe ein einfaches jQuery-Plugin erstellt:

var SINGLECLICK_CLICKED = 'singleClickClicked';
$.fn.singleClick = function () {
    var fncHandler; 
    var eventData;
    var fncSingleClick = function (ev) {
        var $this = $(this);
        if (($this.data(SINGLECLICK_CLICKED)) || ($this.prop('disabled'))) {
            ev.preventDefault();
            ev.stopPropagation();
        }
        else {
            $this.data(SINGLECLICK_CLICKED, true);
            window.setTimeout(function () {
                $this.removeData(SINGLECLICK_CLICKED);
            }, 1500);
            if ($.isFunction(fncHandler)) {
                fncHandler.apply(this, arguments);
            }
        }
    }

    switch (arguments.length) {
        case 0:
            return this.click();
        case 1:
            fncHandler = arguments[0];
            this.click(fncSingleClick);
            break;
        case 2: 
            eventData = arguments[0];
            fncHandler = arguments[1];
            this.click(eventData, fncSingleClick);
            break;
    }
    return this;
}

Und benutze es dann so:

$("#button1").singleClick(function () {
   $(this).prop('disabled', true);
   //...
   $(this).prop('disabled', false);
})
0
Andrea

Die von @Kichrum bereitgestellte Lösung hat für mich fast funktioniert. Ich musste e.stopImmediatePropagation () auch hinzufügen, um die Standardaktion zu verhindern. Hier ist mein Code:

$('a, button').on('click', function (e) {
    var $link = $(e.target);
    if (!$link.data('lockedAt')) {
        $link.data('lockedAt', +new Date());
    } else if (+new Date() - $link.data('lockedAt') > 500) {
        $link.data('lockedAt', +new Date());
    } else {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
    }
});
0