Question

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

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

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

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

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

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

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

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

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

3 个答案: