Как предотвратить двойной щелчок с помощью jQuery?

еще одно решение:

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

здесь мы сохраняем время последнего клика как атрибут данных, а затем проверяем, был ли предыдущий клик более 0,3 секунды назад. Если это false (менее 0,3 сек назад), просто обновите время последнего щелчка, если true, сделайте что-нибудь.

jsbin

я обнаружил, что большинство решений не работают с щелчками по элементам, таким как метки или DIV (например. при использовании элементов управления кендо). Поэтому я сделал это простое решение:

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

используйте его на том месте, где вы должны решить начать событие или нет:

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

    ..continue...
});

мое решение:https://gist.github.com/pangui/86b5e0610b53ddf28f94 он предотвращает двойной щелчок, но принимает больше щелчков после 1 секунды. Надеюсь, это поможет.

вот код:

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

в моем случае у jQuery one были некоторые побочные эффекты (в IE8), и я в конечном итоге использовал следующее :

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

, которая работает очень хорошо и выглядит проще. Нашел его там: http://www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html

просто поместите этот метод в свои формы, тогда он будет обрабатывать двойной щелчок или несколько кликов один раз. после отправки запроса он не позволит отправлять снова и снова запрос.

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

это поможет вам точно.

у меня аналогичная проблема. Вы можете использовать setTimeout (), чтобы избежать двойного щелчка.

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

/ / также проверьте здесь, если атрибут отключен

/ / Если в теге btn отключен атрибут, то // возвращать. Преобразуйте это в js.

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

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

то, что я узнал, было старым, но рабочим решением в современных браузерах. Работает для не переключения классов при двойном щелчке мыши.

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

Это мой первый пост, и я очень неопытен, поэтому, пожалуйста, полегче со мной, но я чувствую, что у меня есть действительный вклад, который может быть полезен кому-то...

иногда вам нужно очень большое окно времени между повторными щелчками (например, ссылка mailto, где требуется несколько секунд для открытия приложения электронной почты, и вы не хотите, чтобы он снова срабатывал), но вы не хотите замедлять пользователя в другом месте. Мое решение-использовать имена классов для ссылок в зависимости от типа события, сохраняя дважды щелкните функциональность в другом месте...

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)

    }
});

у меня была аналогичная проблема, но отключение кнопку не полностью сделал свое дело. Были некоторые другие действия, которые имели место, когда кнопка была нажата, и, иногда, кнопка не была отключена достаточно скоро, и когда пользователь дважды щелкнул, 2 события, где выстрелил.
Я взял идею тайм-аута Pangui и объединил оба метода, отключив кнопку и включив тайм-аут, на всякий случай. И я создал простой плагин jQuery:

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

и затем использовать его как это:

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

/*
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
}

});

решение, предоставленное @Kichrum, почти сработало для меня. Я должен был добавить e.stopImmediatePropagation () также для предотвращения действия по умолчанию. Вот мой код:

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

"Easy Peasy"

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