web-gelistirme-sc.com

JQuery kullanarak çift tıklama nasıl önlenir?

Bir düğmem var:

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

JQuery içinde aşağıdaki kullanıyorum, ancak yine de çift tıklama sağlar.

<script type="text/javascript">

$(document).ready(function () {

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

Çift tıklamayı nasıl önleyebileceğim hakkında bir fikriniz var mı?

51
Nate Pet

jQuery's one () , bağlı olan her öğe için ekli olay işleyicisini bir kez ateşleyecek ve sonra olay işleyicisini kaldıracaktır. 

Gereklilikleri yerine getirmeyen bir nedenden ötürü, biri tıklandıktan sonra düğmeyi de tamamen devre dışı bırakabilirsiniz.

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

submit kimliğinin kullanılmasının, bu öğeye referansla form.submit işlevinin üzerine yazdığından sorunlara neden olabileceği belirtilmelidir.

63
adeneo

Sadece bir çözüm daha:

$('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());
});

Burada son tıklamanın zamanını veri niteliği olarak kaydederiz ve ardından önceki tıklamanın 0,3 saniyeden daha önce olup olmadığını kontrol ederiz. Yanlış ise (0,3 saniyeden az bir süre önce), doğru ise, son tıklama zamanını güncelleyin, bir şey yapın.

jsbin

21
Kichrum

Çözümlerin çoğunun, Etiketler veya DIV'ler gibi öğelere tıklamalarla işe yaramadığını öğrendim (örn. Kendo kontrollerini kullanırken). Bu yüzden bu basit çözümü yaptım:

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;
}

Bir etkinlik başlatmaya karar verip vermeyeceğiniz yerde kullanın:

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

    ..continue...
});
16
roberth

Çözümüm: https://Gist.github.com/pangui/86b5e0610b53ddf28f94 Çift tıklamayı önler ancak 1 saniye sonra daha fazla tıklamayı kabul eder. Umarım yardımcı olur.

İşte kod:

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

Benim durumumda, jQuery one'ın bazı yan etkileri oldu (IE8’de) ve aşağıdakileri kullanarak bittim:

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

çok güzel çalışıyor ve daha basit görünüyor. Orada bulundu: http://www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html

11
Etienne

bu yöntemi formlarınıza koymanız yeterlidir, daha sonra bir defada çift tıklamayla veya daha fazla tıklamayla ilgilenir. istek gönderdikten sonra tekrar tekrar göndermeye izin vermeyecektir.

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

kesin size yardımcı olacaktır.

3
Bachas

Bende de benzer bir sorun var. Çift tıklamayı önlemek için setTimeout () öğesini kullanabilirsiniz.

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

// burada devre dışı bırakılmış bir öznitelik olup olmadığını da kontrol edin

// btn etiketinde devre dışı bırakılmış bir özellik varsa o zaman // dönüş. Bunu js'ye dönüştür.

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

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

Öğrendiğim şey eski ama modern tarayıcılarda çalışan bir çözümdü. Çift tıklamada sınıfları değiştirmemek için çalışır.

$('*').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

Bu benim ilk gönderim ve çok deneyimsiz olduğum için lütfen beni rahatlat, ama birine yardımcı olabilecek geçerli bir katkı aldığımı hissediyorum ...

Bazen, tekrarlanan tıklamalar arasında çok büyük bir zaman penceresine ihtiyaç duyarsınız (örneğin, e-posta uygulamasının açılmasının birkaç saniye sürdüğü ve yeniden tetiklenmesini istemediğiniz bir mailto linki), ancak yavaşlatmak istemezsiniz başka bir yerde kullanıcı. Çözümüm, başka bir yerde çift tıklama işlevini korurken, olay türüne bağlı olarak bağlantılar için sınıf adları kullanmaktır ...

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
}

});

Gerçekten istediğiniz şey, birden fazla form gönderimini önlemek ve sadece çift tıklamayı önlemek değil, bir düğmenin click olayında jQuery one () kullanmak, istemci tarafında doğrulama (gerekirse işaretli metin alanları gibi) varsa sorunlu olabilir. Bunun nedeni, tıklamanın istemci tarafı doğrulamasını tetiklemesidir ve doğrulama başarısız olursa düğmeyi tekrar kullanamazsınız. Bunu önlemek için, bir () hala doğrudan formun gönderim etkinliğinde kullanılabilir. Bu, bunun için bulduğum en temiz jQuery tabanlı çözüm:

<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

"Basit"

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

Ben de benzer bir sorun yaşadım, ancak düğmeyi devre dışı bırakmak hile yapamadı. Düğme tıklandığında ve bazen düğme yeterince kısa sürede devre dışı bırakılmadığında ve kullanıcı çift tıklandığında, atıldığı 2 etkinlik olduğunda başka bazı işlemler yapıldı.
Pangui'nin zaman aşımı fikrini kullandım ve her iki tekniği de bir araya getirip düğmeyi etkisiz hale getirip zaman aşımına uğradım. Ve basit bir jQuery eklentisi oluşturdum:

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;
}

Ve sonra bu şekilde kullanın:

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

@Kichrum tarafından sağlanan çözüm neredeyse benim için çalıştı. Varsayılan eylemi önlemek için e.stopImmediatePropagation () eklemesi gerekiyordu. İşte kodum:

$('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
Peter van Mourik