如何防止用户在链接的图像上多次点击？答案

【问题标题】：How to prevent users from clicking multiple times on a linked image?如何防止用户在链接的图像上多次点击？
【发布时间】：2010-10-08 16:11:34
【问题描述】：

我有一个带有链接图像的页面，其中链接需要一些时间来加载。因此，用户倾向于多次点击它。这有时会导致代码中出现错误。如何防止用户多次点击链接？

为了解决这个问题，我将链接更改为 onClick 事件，然后在函数中使用了代码：

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

但是，这似乎没有帮助。另外，我更愿意将其保留为简单的链接图像，而不是使用 javascript。

【问题讨论】：

您将不得不选择 javascript 或让您的用户满足他们的 ocd 倾向。你的 html 是什么样的？
我想我会选择javascript然后...

标签： javascript jquery hyperlink

【解决方案1】：

曾经的解决方案是向元素添加一个类，用作标志以确定代码应该运行。

这是一个例子： 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;
}

【讨论】：

简单而优雅，通过让用户知道正在发生的事情来提供良好的用户体验。我喜欢它。

【解决方案2】：

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

【讨论】：

【解决方案3】：

一个可能/可能不起作用的 hacky 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; }

点击链接时应该显示非链接图像（理论上）。

【讨论】：