Предотвращение нескольких нажатий кнопки

Ответ 1

Я нашел это решение простым и сработало для меня:

<form ...>
<input ...>
<button ... onclick="this.disabled=true;this.value='Submitting...'; this.form.submit();">
</form>

Это решение было найдено в: Исходное решение

Ответ 2

отключить кнопку при нажатии, включить ее после завершения операции

$(document).ready(function () {
    $("#btn").on("click", function() {
        $(this).attr("disabled", "disabled");
        doWork(); //this method contains your logic
    });
});

function doWork() {
    alert("doing work");
    //actually this function will do something and when processing is done the button is enabled by removing the 'disabled' attribute
    //I use setTimeout so you can see the button can only be clicked once, and can't be clicked again while work is being done
    setTimeout('$("#btn").removeAttr("disabled")', 1500);
}

рабочий пример

Ответ 3

JS обеспечивает простое решение с использованием свойств события:

$('selector').click(function(event) {
  if(!event.detail || event.detail == 1){//activate on first click only to avoid hiding again on multiple clicks
    // code here. // It will execute only once on multiple clicks
  }
});

Ответ 4

с использованием count,

 clickcount++;
    if (clickcount == 1) {}

После повторного набора кликов, установленного на ноль.

Ответ 5

Один из способов сделать это - установить счетчик, и если число превышает определенное число, верните false. легко, как это.

var mybutton_counter=0;
$("#mybutton").on('click', function(e){
    if (mybutton_counter>0){return false;} //you can set the number to any
    //your call
     mybutton_counter++; //incremental
});

убедитесь, что оператор находится поверх вашего вызова.

Ответ 6

Это должно сработать для вас:

$(document).ready(function () {
    $('.applicationButton').click(function (e) {
        var btn = $(this),
            isPageValid = Page_ClientValidate(); // cache state of page validation
        if (!isPageValid) {
            // page isn't valid, block form submission
            e.preventDefault();
        }
        // disable the button only if the page is valid.
        // when the postback returns, the button will be re-enabled by default
        btn.prop('disabled', isPageValid);
        return isPageValid;
    });
});

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

Ответ 7

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

element.on('click', function() {
  element.css('pointer-events', 'none'); 
  //do all of your stuff
  element.css('pointer-events', 'auto');   
};

Ответ 8

Возможно, это поможет и даст желаемую функциональность:

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>
<p>Hello</p>

Ответ 9

Мы можем использовать и отключать клики для предотвращения множественных кликов. я попробовал это для своего приложения и работал как ожидалось.

$(document).ready(function () {     
    $("#disable").on('click', function () {
        $(this).off('click'); 
        // enter code here
    });
})

Ответ 10

Если вы делаете полную обратную связь в оба конца, вы можете просто заставить кнопку исчезнуть. Если есть ошибки проверки, кнопка снова будет видна после перезагрузки страницы.

Первый набор добавляет стиль к вашей кнопке:

<h:commandButton id="SaveBtn" value="Save"
    styleClass="hideOnClick"
    actionListener="#{someBean.saveAction()}"/>

Затем заставьте его скрыть при нажатии.

$(document).ready(function() {
    $(".hideOnClick").click(function(e) {
        $(e.toElement).hide();
    });
});

Ответ 11

После нескольких часов поиска я исправил его следующим образом:

    old_timestamp == null;

    $('#productivity_table').on('click', function(event) {

    // code executed at first load
    // not working if you press too many clicks, it waits 1 second
    if(old_timestamp == null || old_timestamp + 1000 < event.timeStamp)
    {
         // write the code / slide / fade / whatever
         old_timestamp = event.timeStamp;
    }
    });

Ответ 12

Просто скопируйте этот код в свой script и отредактируйте # button1 с идентификатором вашей кнопки, и он решит вашу проблему.

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

Ответ 13

Я изменил решение byKalyani, и до сих пор он работал красиво!

$('selector').click(function(event) {
  if(!event.detail || event.detail == 1){ return true; }
  else { return false; }
});