Вопрос по jquery, double-click – Как предотвратить двойной щелчок с помощью jQuery?

52

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

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

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

<script type="text/javascript">

$(document).ready(function () {

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

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

Это кнопка, вы можете нажимать на нее столько раз, сколько захотите. Просто запретите действие по умолчанию или отключите его после первого щелчка. adeneo
Согласен с аденео. Самое простое решение - просто отключить его после нажатия. DaiYoukai
если отключен! это не постбэк! Только один клик должен быть разрешен! У вас есть какое-либо решение, чтобы только один клик происходил до полной обработки формы? SHEKHAR SHETE

Ваш Ответ

14   ответов
1

Это мой первый пост & 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)

    }
});
1

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

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

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

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

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

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

В моем случае это работает, так как я обновляю страницу после отправки! другие должны помнить, что эта кнопка будет бесполезна после одного клика
Нет, one () работает просто отлично, она запускает связанную функцию только один раз, но, поскольку это обычная кнопка, вы можете нажимать ее до тех пор, пока не повредите пальцы. Единственный способ остановить это - это отключить его, как описано выше, или предотвратить отправку формы по умолчанию, чтобы кнопка ничего не делала, что вы должны сделать в любом случае, в противном случае страница перезагрузится, и все функции javascript начнутся заново. и ни одно из этих решений не будет работать в любом случае.
если вы отключили! затем кнопка не выполняет обратную передачу! У вас есть какое-либо решение, чтобы один полный щелчок происходил до полной обработки формы?
так. действительно ли кто-то помогает мне в том, чего я пытаюсь достичь, верно? Нам нужно использовать инвалидов, чтобы он действительно работал. Nate Pet
11

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

Не работает с динамически сгенерированными элементами (необходимо отозвать).
Работает так хорошо, очень элегантное решение
Не работает в Chrome.Try this fiddle yourself.
Это должен быть принятый ответ. Отлично работает на кнопках. Ваш текстовый ввод может нуждаться в другой обработке: как показано здесь (в Chrome)jsfiddle.net/b6nsdbqe
16

Я обнаружил, что большинство решений не работают с щелчками по таким элементам, как метки или 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...
});
Хороший Хак. Я не знаю, какая именно проблема, но по крайней мере это решение сработало от меня. Спасибо @roberth
отлично, это использование идеально подходит для анимации любого стиля
0

Если вы действительно хотите избежать множественной отправки форм, а не просто предотвратить двойной щелчок, использование 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>
0

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

});
12

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

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

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

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

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

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

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

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

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

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

Спасибо, это помогло мне решить проблему, с которой я столкнулся :)
3

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

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

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

В то же время вы не можете подать несколько запросов. $ (this) .submit (function () {return false;});
Спас мой день. Благодарю.
Как это работает?
1

"Easy Peasy"

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

Похожие вопросы