버튼 대신 앵커를 사용할 때 버튼 매싱을 방지하려면 어떻게해야합니까?

Question

버튼을 사용하여 Ajax를 통해 데이터를 제출하고 있습니다. jQuery를 사용하여 버튼을 비활성화하고 활성화합니다. 이는 사용자가 악의적으로 또는 무의식적으로 여러 요청을 실행할 수있는 "단추 매싱"을 방지하기위한 것입니다.

"요소에 영향을받지 않는"방법으로 jQuery에서이 동작을 방지 할 수 있습니까? 예를 들어 버튼 대신 앵커를 사용하여 데이터를 제출하려고한다고 가정 해 보겠습니다. 비활성화 할 수있는 버튼. 하지만 내가 아는 한 당신은 닻을 무력화시킬 수 없습니다. 여기

내가 지금하고 있어요 방법 : (나는 그것을 짧게 만들기 위해 불필요한 코드의 일부를 제거했습니다 참고)

$('.fav .button').click(function() { 
    $.ajax({ 
    context: this, 
    dataType: 'json', 
    beforeSend: function() { 
    // Toggle state; disable button to prevent button mashing 
    $(".fav").toggleClass("fav-state-1"); 
    $(".fav .button").attr("disabled", true); 
    }, 
    error: function() { 
    // Rollback state and re-enable button on error 
    $(".fav").toggleClass("fav-state-1"); 
    $(".fav .button").attr("disabled", false); 
    }, 
    success: function(response) { 
    if (response.result == "success") { 
    $(".fav .button").attr("disabled", false); 
    } 
    else { 
    // Rollback state; re-enable button 
    $(".fav").toggleClass("fav-state-1"); 
    $(".fav .button").attr("disabled", false); 
    } 
    } 
    }); 
    return false; 
}); 

는 HTML :

<input class="button" type="button" value=""> 

Answer 1

물론이 작업을 수행하는 가장 좋은 방법은 서버 측에서 정상적으로 처리하는 것입니다.

즉, 이미 클릭 한 값을 저장하기 위해 jQuery에서 data storage methods을 사용할 수 있으며,이 값을 사용하여 사용자가 이미 버튼을 클릭했는지 여부를 결정할 수 있습니다. 값은 선택기마다 저장되므로 아무 것도 설정하지 않아도됩니다.

$("a").click(function(e) { 
    e.preventDefault(); 

    if (!$(this).data('isClicked')) { 
     var link = $(this); 

     // Your code on successful click 

     // Set the isClicked value and set a timer to reset in 3s 
     link.data('isClicked', true); 
     setTimeout(function() { 
      link.removeData('isClicked') 
     }, 3000); 
    } else { 
     // Anything you want to say 'Bad user!' 
    } 
}); 

이점은 요소 별 솔루션이므로 사용자가 다른 것을 클릭하지 못하게한다는 것입니다. 귀하의 경우에는 성공 함수에서 link.removeData을 수행하는 것이 좋습니다. 이것은 클라이언트입니다 :

참고 http://jsfiddle.net/jonathon/ke8Az/이 (당신이 3 초 내에 다시 클릭하려고하면, 당신은이 '기다려주십시오'얻을 수 있습니다하지만 여전히 나머지 부분을 클릭 할 수 있습니다) : 작업 그것의

예 사이드 솔루션 만. 은 JavaScript가 설치된 경우에만입니다. 서버 측에서 처리하지 않으면 사용자가 악의적으로 여러 요청을 보낼 수 있습니다. 이것은 '무의식적으로'부분에 도움이됩니다.

Answer 2

당신은 할 수 있습니다 다음 :

1. 설정에 클릭 된 시간은 초입니다.
2. 요청을 실행하는 메소드에서 참인지 확인한 다음 요청을 보내지 않으면
3. 요청을 보내지 않고 변수를 true로 설정하십시오. 변수를 다시 false로 변경하는 setTimeout을 사용하여 1 초 후에 발생시키는 메소드를 설정하십시오.

여러분은 여러분의 필요에 변수 이름을 지정해야합니다, 당신은 올바른 범위에서 변수를 유지하는 방법을 찾을 필요가있을 것이다, 그러나 그것은 어려운 일이 아니다.

Answer 3

ajax 호출 전에 클릭 된 개체의 클릭 이벤트를 바인딩 해제 한 다음 성공/오류 메서드에서 클릭 이벤트를 다시 바인딩 할 수 있습니다.

그런 식으로 버튼을 원하는대로 매시 할 수 있지만 통화가 끝날 때까지 클릭이 끊어지지는 않습니다.

Answer 4

설명하는 동작을 멈추는 최선의 방법은 서버쪽에있는 것입니다.

Answer 5

debounce을 사용하여 한 번의 클릭 만 등록 할 수도 있습니다. underscore.js 및 lodash.js 모두이 편리한 방법을 제공합니다.

여기에 개념을 데모하기위한 fiddle이 있습니다. lazyClick을 사용하면 링크를 두 번 또는 세 번 클릭 할 수 있지만 이벤트 처리기는 한 번만 실행됩니다.