Прадухіленне некалькіх клікаў на кнопку

У мяне наступны код JQuery, каб прадухіліць кнопку Падвойная пстрычка. Ён выдатна працуе. Я выкарыстоўваю Page_ClientValidate() , каб пераканацца, што двайны пстрычка папярэджана толькі калі старонка з'яўляецца сапраўдным. [Калі ёсць памылкі праверкі сцяг не павінен быць усталяваны як няма постбэка на сервер не пачаткаў]

Ці ёсць лепшы спосаб, каб прадухіліць другі пстрычка на кнопцы да загрузкі старонкі таму?

Ці можам мы ўсталяваць сцяг isOperationInProgress = yesIndicator толькі калі старонка выклікае зваротную перадачу на сервер? Ёсць падыходзячы падзея для яго, які будзе выклікацца да таго, як карыстальнік можа націснуць на кнопку ў другі раз?

Note: I am looking for a solution that won't require any new API

Note: This question is not a duplicate. Here I am trying to avoid the use of Page_ClientValidate(). Also I am looking for an event where I can move the code so that I need not use Page_ClientValidate()

Note: No ajax involved in my scenario. The ASP.Net form will be submitted to server synchronously. The button click event in JavaScript is only for preventing double click. The form submission is synchronous using ASP.Net.

Present Code

$(document).ready(function() {
  var noIndicator = 'No';
  var yesIndicator = 'Yes';
  var isOperationInProgress = 'No';

  $('.applicationButton').click(function (e) {
   //Prevent button from double click
    var isPageValid = Page_ClientValidate();
    if (isPageValid) {
      if (isOperationInProgress == noIndicator) {
        isOperationInProgress = yesIndicator;
      } else {
        e.preventDefault();
      }
    } 
  });
});

References:

  1. валідатар выклікае няправільнае паводзіны для двайны праверкі кліка
  2. Ці выкарыстоўваць Page_IsValid або Page_ClientValidate() (для кліенцкага боку падзей)

Звярніце ўвагу на @Peter Івана ў прыведзеных вышэй спасылках:

<�Р> выкліку Page_ClientValidate() некалькі разоў можа выклікаць старонку, каб быць занадта дакучлівым (некалькі папярэджанняў і г.д.) ..
19
@CarrieKendall Тут я спрабую пазбягаць выкарыстання Page_ClientValidate()
дададзена аўтар Lijo, крыніца
Выкарыстоўвайце адключыць атрыбут
дададзена аўтар Prasath K, крыніца
магчыма дублікат stackoverflow.com/ пытанні/2830542/& hellip;
дададзена аўтар Carrie Kendall, крыніца

13 адказы

Я знайшоў гэта рашэнне, якое з'яўляецца простым і працуе для мяне:

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

This solution was found in: Original solution

31
дададзена
Калі вы націснеце досыць хутка вы можаце націснуць на кнопку два разы
дададзена аўтар Diego, крыніца
Гэта працуе вельмі проста і элегантна на даволі ваніль старонкі JSP з канцом Java назад, што проста абнаўляе ўсю старонку (наперад да таго ж JSP) пасля таго, як праца прадстаўлення робяцца.
дададзена аўтар Rebeccah, крыніца
Я бачу тое ж самае, як Дыега, досыць хутка націснуўшы яшчэ можна двойчы пстрыкнуць яго і двойчы адправіць яго.
дададзена аўтар charley, крыніца

адключыць кнопку мышы, уключыце яго пасля завяршэння аперацыі

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

працоўны прыклад

10
дададзена
Што рабіць, калі праца не была завершана ў 1500ms? Карыстальнік зможа выбраць яго. Я не думаю, што будзе працаваць для мяне.
дададзена аўтар Lijo, крыніца
Няма Аякса ўдзел у маім сцэнары. Форма asp.net будзе прадстаўлена на сервер сінхронна. Я думаю, гэта рашэнне не будзе працаваць для гэтага сцэнара.
дададзена аўтар Lijo, крыніца
DoWork будзе называцца нават калі праверка Asp.Net была не ўдалася, ці не так? Гэтага не павінна адбыцца.
дададзена аўтар Lijo, крыніца
@Jason Вы павінны выкарыстоўваць .prop ( «адключана», праўда) (ці хлусня ), каб змяніць яго адключанае стан
дададзена аўтар Ian, крыніца
гэта метад DoWork робіць вашу праверку, а затым адпраўляе форму. кнопка становіцца даступнай, калі праверка старонкі не ўдаецца.
дададзена аўтар Jason, крыніца
функцыя не мае ніякага значэння. важна толькі тое, каб выклікаць АТР ( «адключана», «адключана») , калі вы хочаце зрабіць кнопку іп інтэрактыўнымі і removeAttr ( «адключана») у дазваляюць кнопку пстрычкі.
дададзена аўтар Jason, крыніца
бачыць маё абнаўленне на скрыпцы, і код JS, спадзяюся, што растлумачвае
дададзена аўтар Jason, крыніца
Вы не будзеце выкарыстоўваць SetTimeout, што было проста паказаць яго працу. на самай справе вы будзеце рабіць свой Ajax выклік там, і ўключыць кнопку, выдаліўшы адключаны атрыбут, калі выклік завершаны ў зрабіць , Памылка , або заўсёды апрацоўшчык.
дададзена аўтар Jason, крыніца
Так што, калі гэта памылка, проста undisable яго, і хай яны націсніце на яго яшчэ раз, каб паўтарыць спробу.
дададзена аўтар Jacob Morrison, крыніца

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
  }
});
8
дададзена
Не маглі б вы растлумачыць, як гэта працуе?
дададзена аўтар Jose Rojas, крыніца
@JoseRojas Event.detail з'яўляецца ўласцівасцю толькі для чытання, якая вяртае статус пстрычкі - адзінарны, двайны або патройны пстрычка (у экзэмпляры кліка слухача). Хоць гэта можа быць цікавым уласцівасцю ў некаторых спажывецкай выпадках, я б не рэкамендаваў выкарыстоўваць гэты метад можна выкарыстоўваць для AJAX, або абяцанне падобных працэдур, дзе затрымка завяршэння можа выходзіць за межы тэрмінаў вылаву патройны клік, якая можа прывесці да дублюе дзеянне. noreferrer "> Прыклад
дададзена аўтар seantunwin, крыніца

Я змяніў рашэнне па @Kalyani і да гэтага часу гэта працуе прыгожа!

$('selector').click(function(event) {
  if(!event.detail || event.detail == 1){ return true; }
  else { return false; }
});
2
дададзена

выкарыстоўваючы падлік,

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

Пасля вяртання зноў ClickCount роўным нулю.

2
дададзена

Адключыць падзея паказальніка ў першым радку зваротнага выкліку, а затым аднавіць іх на апошнюю радок.

element.on('click', function() {
  element.css('pointer-events', 'none'); 
  //do all of your stuff
  element.css('pointer-events', 'auto');   
};
1
дададзена
адносна downvote, калі ласка, дайце мне ведаць, чаму гэта было бы дрэнны ідэяй. Я выкарыстоўваю гэта цяпер на некалькі рэчаў, і хацеў бы змяніць яго, калі гэта не з'яўляецца добрай ідэяй. дзякуй шмат.
дададзена аўтар Harold, крыніца

Мы можам выкарыстоўваць і выключаць клік для прадухілення некалькіх клікаў. я паспрабаваў яго ў маім дадатку, і гэта працуе, як чакалася.

$(document).ready(function() {     
    $("#disable").on('click', function() {
        $(this).off('click'); 
       //enter code here
    });
})
1
дададзена

Гэта павінна працаваць для вас:

$(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-браўзэр з падтрымкай).

0
дададзена
Любая ідэя, як зрабіць праверку на боку сервера для гэтага ў ASP.Net? Любыя спасылкі?
дададзена аўтар Lijo, крыніца
Гэта сапраўды залежыць ад таго, што вы робіце з формай дадзеных на боку сервера. Напрыклад, калі гэта проста робіць DB ўстаўку, вы можаце наладзіць свой запыт, каб забараніць ўстаўкі паўтаральных дадзеных (ці, калі вы робіце абнаўленне вы можаце забараніць змены ў тую ж запіс на працягу 60 секунд, і г.д.). Калі вы робіце нешта накшталт здзелкі крэдытнай карты, а затым пост-Redirect-Get ( en.wikipedia.org/wiki/Post/Redirect/Get ) ці нешта падобнае ёсць добрая ідэя. У канчатковым рахунку, вы павінны вызначыць, што аб двайных правадках дрэнна, і прыняць меры па яго прадухіленні.
дададзена аўтар pete, крыніца

Можа быць, гэта дапаможа і даць патрэбныя функцыі:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Hello

</div> </div>
0
дададзена
Я спрабаваў выкарыстаць гэта, але для мяне гэта фактычна спыняе выгляд Пасылае
дададзена аўтар Collins, крыніца
@Collins, Вы можаце размясціць фрагмент кода, так што я магу бачыць, дзе праблема?
дададзена аўтар Rish, крыніца

Калі вы робіце поўны туды-зваротна пост-назад, вы можаце проста зрабіць кнопку знікне. Калі ёсць памылкі праверкі, кнопка будзе адлюстроўвацца зноў пры перазагрузцы старонкі.

Спачатку ўсталюйце дадаць стыль вашай кнопкі:


Затым зрабіць яго схаваць пры націску.

$(document).ready(function() {
    $(".hideOnClick").click(function(e) {
        $(e.toElement).hide();
    });
});
0
дададзена
Маючы патрэбу перазарадзіць, калі ёсць толькі памылкі праверкі вельмі дрэнна UX - таксама можа не працаваць у некаторых сітуацыях (вы страцілі інфармацыю)
дададзена аўтар jQwierdy, крыніца
Існуюць розныя класіфікацыі праверкі: а. можна было б зрабіць у прамым эфіры ў кліенце (1. як тыпы карыстальнікаў, 2. як яны ідуць паміж палямі, ці 3. калі яны ўдараюць ўявіць); б. можа быць зроблена з дапамогай AJAX; і с. можа быць зроблена толькі на серверы, пасля паста/адправіць. Калі вы хочаце, каб з усіх сіл, вы маглі б зрабіць кнопку адправіць пачаць недзеяздольным і ўключыць толькі адзін раз усе палі з'яўляюцца сапраўднымі (на аснове класіфікацый a1, a2, і б). У гэтым выпадку, я думаю, што робіць кнопка знікае пасля націску дапаможа прадухіліць двайны пстрычка на кнопку.
дададзена аўтар Pixelstix, крыніца

Адзін са спосабаў зрабіць гэта ўсталяваць лічыльнік і калі колькасць перавышае вызначаны лік вяртае хлусня. проста, як гэта.

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

пераканайцеся, калі аператар знаходзіцца ў верхняй частцы вашага званка.

0
дададзена
Вось і мне трэба праверыць Page_ClientValidate() . Я стараюся пазбягаць выкарыстання Page_ClientValidate()
дададзена аўтар Lijo, крыніца
гэта не будзе працаваць, як лічыльнік не павялічваецца, а не змяншаецца. гэта таксама больш складаная, чым патрабуецца
дададзена аўтар Jason, крыніца

Проста скапіруйце ўставіць гэты код у сцэнары і рэдагавання # button1 з кнопкай ід і ён будзе вырашыць вашу праблему.

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

Пасля некалькіх гадзін пошукаў я ўсталяваў яго такім чынам:

    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;
    }
    });
0
дададзена