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

У меня есть кнопка как таковая:

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

В jQuery я использую следующее, но оно по-прежнему допускает двойной щелчок:

<script type="text/javascript">

$(document).ready(function () {

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

Любая идея о том, как я могу предотвратить двойной щелчок?

 DaiYoukai24 июл. 2012 г., 00:53
Согласен с аденео. Самое простое решение - просто отключить его после нажатия.
 adeneo24 июл. 2012 г., 00:51
Это кнопка, вы можете нажимать на нее столько раз, сколько захотите. Просто запретите действие по умолчанию или отключите его после первого щелчка.
 SHEKHAR SHETE08 янв. 2015 г., 10:09
если отключен! это не постбэк! Только один клик должен быть разрешен! У вас есть какое-либо решение, чтобы только один клик происходил до полной обработки формы?

Ответы на вопрос(14)

Решение Вопроса

JQuery & APOS; sодин() сработает прикрепленный обработчик события один раз для каждого привязанного элемента, а затем удалит обработчик события.

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

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

Следует отметить, что с использованием идентификатораsubmit может вызвать проблемы, так как это перезаписываетform.submit функция со ссылкой на этот элемент.

 Nate Pet24 июл. 2012 г., 00:58
так. действительно ли кто-то помогает мне в том, чего я пытаюсь достичь, верно? Нам нужно использовать инвалидов, чтобы он действительно работал.
 24 июл. 2012 г., 01:01
Нет, one () работает просто отлично, она запускает связанную функцию только один раз, но, поскольку это обычная кнопка, вы можете нажимать ее до тех пор, пока не повредите пальцы. Единственный способ остановить это - это отключить его, как описано выше, или предотвратить отправку формы по умолчанию, чтобы кнопка ничего не делала, что вы должны сделать в любом случае, в противном случае страница перезагрузится, и все функции javascript начнутся заново. и ни одно из этих решений не будет работать в любом случае.
 17 февр. 2016 г., 16:34
В моем случае это работает, так как я обновляю страницу после отправки! другие должны помнить, что эта кнопка будет бесполезна после одного клика
 08 янв. 2015 г., 09:22
если вы отключили! затем кнопка не выполняет обратную передачу! У вас есть какое-либо решение, чтобы один полный щелчок происходил до полной обработки формы?

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

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

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)

    }
});

Мое решение: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;
}; 

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

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

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

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

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

// если в теге btn отключен атрибут          // вернуть. Преобразовать это в JS.

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

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

В моем случае у 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

 19 нояб. 2014 г., 11:58
Не работает в Chrome.Try this fiddle yourself.
 15 мая 2016 г., 05:23
Работает так хорошо, очень элегантное решение
 05 апр. 2016 г., 11:42
Не работает с динамически сгенерированными элементами (необходимо отозвать).
 09 июн. 2015 г., 18:28
Это должен быть принятый ответ. Отлично работает на кнопках. Ваш текстовый ввод может нуждаться в другой обработке: как показано здесь (в Chrome)jsfiddle.net/b6nsdbqe

Если вы действительно хотите избежать множественной отправки форм, а не просто предотвратить двойной щелчок, использование jQuery one () для события нажатия кнопки может быть проблематичным, если имеется проверка на стороне клиента (например, текстовые поля, помеченные как необходимые). ). Это потому, что щелчок запускает проверку на стороне клиента, и если проверка не проходит, вы не можете снова использовать кнопку. Чтобы избежать этого, one () все еще можно использовать непосредственно в событии отправки формы. Это самое чистое решение на основе jQuery, которое я нашел для этого:

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

Решение, предоставленное @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();
    }
});

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

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

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

 02 окт. 2017 г., 10:44
Спас мой день. Благодарю.
 11 мар. 2019 г., 13:53
Как это работает?
 14 мар. 2019 г., 07:10
В то же время вы не можете подать несколько запросов. $ (this) .submit (function () {return false;});

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

$('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

 19 июл. 2016 г., 09:42
Спасибо, это помогло мне решить проблему, с которой я столкнулся :)

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

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...
});
 27 нояб. 2016 г., 13:40
Хороший Хак. Я не знаю, какая именно проблема, но по крайней мере это решение сработало от меня. Спасибо @roberth
 14 авг. 2017 г., 01:43
отлично, это использование идеально подходит для анимации любого стиля
/*
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
}

});

У меня была похожая проблема, но отключение кнопки не полностью помогло. Были некоторые другие действия, которые имели место, когда кнопка была нажата, и иногда кнопка не была отключена достаточно быстро, и когда пользователь дважды щелкнул, 2 события были вызваны.
Я взял идею тайм-аута Панги и объединил оба метода, отключив кнопку и включив тайм-аут, на всякий случай. И я создал простой плагин 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);
})

"Easy Peasy"

$(function() {
     $('.targetClass').dblclick(false);
});
 09 мар. 2019 г., 13:52
Вот Это Да! Это самое практичное, супер простое решение.

Ваш ответ на вопрос