Question

我试图阻止对链接进行多次点击，我需要等到该功能完成后再允许在同一个链接上再次点击。

但是，我所做的一切，总是允许多次点击。

这是我的代码：

var active = false;

$('#rotRight').live('click', function(){
        if (active) {
        return;
    }

    $(this).attr('id', 'rotRight1');
    var curAngle = parseInt($(".selected").getRotateAngle()) || 0;


    if($(".selected").rotate({
        angle: curAngle,
        animateTo: curAngle - 90

    })){
        active = true;
    }
    $(this).attr('id', 'rotRight');
    active = false;
});

我知道我正走在正确的道路上。我只是需要有人让我知道我错过了什么，或者我是否做错了。

任何帮助都将不胜感激。

由于

Answer 1

旋转插件有callback，您可以在其中重置活动标记值

var active = false;

$('#rotRight').live('click', function() {
  if (active) {
    return;
  }

  var curAngle = parseInt($(".selected").getRotateAngle()) || 0;

  active = true;
  $(".selected").rotate({
    angle: curAngle,
    animateTo: curAngle - 90,
    callback: function() {
      active = false;
    }
  })
});

Answer 2

在返回

之前先尝试阻止默认行为

var active = false;

$('#rotRight').live('click', function(e){
    if (active) {
        e.preventDefault(); // prevent default behaviour before returning
        return;
    }

    ... 

});

Answer 3

您可以随时创建一个叠加层（加载屏幕），通过带有以下css的全屏div停止用户执行任何操作，直到完成该过程：

#overlay {
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

这将执行以下操作：https://gyazo.com/aa833914eda1c39d3b8198db2b32dc41

在加载屏幕完成之前，使所有内容无法点击。

Answer 4

您可以尝试使用链接上的Data attribute。像这样，您可以在链接本身上设置“活动”属性，然后执行操作。 Jquery使用$（）。data（string）方法处理该系统。我认为它比使用全局“主动”变种更清晰。

$('#rotRight').live('click', function() {
  if ($(this).data("active") != undefined && $(this).data("active") == true) {
    return;
  }

  var curAngle = parseInt($(".selected").getRotateAngle()) || 0;

  $(this).data("active") = true;
  var self = $(this);
  $(".selected").rotate({
    angle: curAngle,
    animateTo: curAngle - 90,
    callback: function() {
      self.data("active") = false;
    }
  })
});

Answer 5

$('#rotRight').live('click', function(e) {
    if (e.handled!=true) {
        e.preventDefault(); // prevent default behaviour before returning
        return;
    }
    e.handled=true;
});

jQuery：防止多次点击？

5 个答案: