如何在使用錨點而不是按鈕時防止按鈕混搭？

我正在使用按鈕通過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="">

來源

2010-12-10 Mohamad

您應該考慮捕獲多個表單提交服務器端而不是客戶端。這更可靠。 – RoToRa 2010-12-10 15:29:56

*「這是爲了防止‘按鈕糖化’，用戶可以在其中火多個請求無論是惡意還是無意。」 *這是很好的嘗試，並防止人們在不知不覺中發送多個請求，但你不能阻止他們這樣做惡意。服務器必須堅固。 – 2010-12-10 15:39:04

謝謝你們，我沒有提到我已經有了一個後端機制來處理這個問題。我只是不希望服務器在這樣的事件中被不必要地轟炸。 – Mohamad 2010-12-10 17:30:06

當然，最好的辦法是在服務器端正常處理它。也就是說，你可以在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/（請注意，如果您嘗試三分中的再次點擊，你得到的「請等待」，但你仍可以單擊其餘部分）

注：這是一個客戶端的工作是

例只有解決方案。如果他們安裝了JavaScript，則只需。除非您在服務器端處理它，否則用戶可能會惡意發送多個請求。這只是「不知情」部分的幫助。

來源

2010-12-10 15:55:26

你可以這樣做如下：

設置變量clickedWithinLastSecond。
在引發請求的方法中，檢查它是否爲真，如果是則不發送請求
如果它沒有發送請求並將變量設置爲true。設置一個方法，在用setTimeout將秒變爲false之後觸發。

您將不得不根據需要自定義變量名稱，並且您需要找到一種方法將變量保留在正確的範圍內，但這並不困難。

來源

2010-12-10 15:26:26 hvgotcodes

在ajax調用之前，您可以解除綁定單擊對象上的單擊事件，然後在成功/錯誤方法中，您可以重新綁定單擊事件。

這樣他們可以儘可能多地搗碎按鈕，但它不會讓點擊連線直到通話結束。

來源

2010-12-10 15:29:22 Jerryf

停止您所描述的行爲的最好且唯一的方法是在服務器端。

來源

2010-12-10 15:41:01

您還可以使用debounce註冊只有一個點擊。 underscore.js和lodash.js都提供了這個方便的方法。

這裏有一個fiddle來演示這個概念。通過lazyClick，您可以雙擊/三擊鏈接，但事件處理程序僅觸發一次。

var lazyClick = _.debounce(onclickHandler, 500); 

function onclickHandler(e){ 
    e.preventDefault(); 
    console.log('clicked'); 
} 

$(function(){ 
    // uncomment this and you will see double clicks are being registered. 
    //$('#btn').click(onclickHandler); 

    // with debounce, only one click will be registered 
    $('#btn').click(lazyClick); 
});

來源

2014-08-26 18:08:19 Mrchief

如何在使用錨點而不是按鈕時防止按鈕混搭？

回答

相關問題