如何防止用户在链接图片上多次点击？

Question

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

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

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

然而，这似乎并没有起到帮助作用。此外，我更喜欢将其保持为简单的链接图像，而不是使用JavaScript。

- dmr

---

你将不得不选择JavaScript或让您的用户满足他们的强迫症倾向。你的HTML长什么样？ - lincolnk

我想我会选择JavaScript... - dmr

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

- user113716

---

通过让用户知道某些事情正在发生，简单而优雅，具有良好的用户体验。我喜欢它。 - Babak Naffas

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

- fcalderan

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

理论上，当链接被点击时，这应该显示非链接图片。

- Karel Petranek