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

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