如何防止用戶在鏈接的圖像上多次點擊？

我有一個鏈接圖像的頁面，其中鏈接需要一些時間來加載。因此，用戶往往會多次點擊它。偶爾會導致代碼中出現錯誤。如何防止用戶多次點擊該鏈接？如何防止用戶在鏈接的圖像上多次點擊？

在試圖解決這個問題，我改變了鏈接到一個onClick事件，然後在功能我使用的代碼：

$('#myImageId').unbind('click'); 
window.location.href = "myLink";

然而，這似乎並沒有被幫助。此外，我寧願保留一個簡單的鏈接圖像，而不是使用JavaScript。

來源

2010-10-08 dmr

你將不得不選擇javascript或讓你的用戶滿足他們的ocd傾向。你的html是什麼樣的？ – lincolnk 2010-10-08 16:18:52

我想我會選擇JavaScript，然後... – dmr 2010-10-08 16:20:21

一旦解決方案是將一個類添加到用作一個標誌，以確定代碼應該運行的元件。

下面是一個例子：http://jsfiddle.net/qLhr8/

$('#myImageId').click(function() { 
    var $th = $(this); 
    if(!$th.hasClass("pending")) { 
      // Add the "pending" class, so subsequent clicks will not 
      // run the code inside this if() 
     $th.addClass("pending"); 
     window.location.href = "myLink"; 
     // you could do a setTimeout to remove the class 
     // if the new page never loads 
    } 
});

與添加的類，你還可以改變圖像的外觀（可能降低其不透明度）以表明它不應該再次點擊。

.pending { 
    opacity: .4; 
    filter:alpha(opacity:40); 
    cursor: wait; 
}

來源

2010-10-08 16:20:37 user113716

簡單和優雅，讓他們知道發生了一些事情，有着良好的用戶體驗。我喜歡。 – 2010-10-08 17:03:47

哈克CSS的解決方案，可能/可能無法正常工作：創建另一個圖像元素，沒有鏈接，使其成爲同級的鏈接，像這樣：

<div> 
    <a href="http://www.long-loading.com" id="link"><img src="my_img.png" id="img_link" alt="GO" /></a> 
    <img src="my_img.png" id="img_nolink" alt="GO" /> 
</div>

立即應用此CSS：

#img_nolink { display: none; position: relative; top: -200px; /* Height of the image */ } 

#link:active + #img_nolink { display: block; }

這應該顯示單擊鏈接時的非鏈接圖像（理論上）。

來源

2010-10-08 16:19:47

<img src="..." id="myImageId"> 


$('#myImageId').bind('click', function() { 
    $(this).unbind('click'); 
    /* do long time task.... 
});

如果圖像是由一根連桿包裹代碼將是

<a href="#"><img src="..." id="myImageId"></a> 


$('#myImageId').parent().bind('click', function(evt) { 
    $(this).unbind('click'); 
    /* do long time task.... 

    evt.preventDefault(); 
});

來源

2010-10-08 16:20:02

如何防止用戶在鏈接的圖像上多次點擊？

回答

相關問題