jquery - 使用 Jquery 启用和禁用图像的单击事件？

Question

我有图像。当单击图像时，我会用一些动画显示数据。所以我想要做的是禁用图像到浏览器中显示的数据。然后一旦加载数据，我需要启用图像。

例如

$("#imageid").click(function(e){
//disable the click
$("idforanim").animate({left : "-=50 "px"},500,function(){callfunction1();})
 })

callfunction1(){
//show the data
//enable the click
}

我怎样才能做到这一点？

Answer 1

另一种方法是设置一个标志以指示数据仍在处理中，并在完成时取消设置该标志：

var processing = false;

$("#imageid").click(function(e){
    if ( !processing )
    {
        //disable the click
        processing = true;
        $("idforanim").animate({left : "-=50px"},500,function(){callfunction1();})
    }
})

callfunction1(){
   //show the data
   //enable the click
   processing = false;
}

Answer 2

您可以利用animate在动画完成时调用函数的事实来做到这一点。例如：

http://jsbin.com/adokiz/2

我们要做的是：

$(document).ready(function() {
    var running = false;
    $('img').on('click', function(event) {
      if (running) return;

      running = true;
      console.log(this);
      $(this).animate({top: '400px'}, function() {
        $(this).css({top: 0});
        running = false;
      });
    });
});

使用命名的全局变量running，您可以防止同时识别多个点击。这与您的代码不完全相同，但您可以轻松地对其进行调整。

另一种更能抵抗被执行两次的方法是使用 jQueryone来绑定它，如下所示：

$(document).ready(function() {  
  var animation;

  var binding = function() {
    $('img').one('click', animation);
  };

  animation = function(event) {
    $(event.target).animate({top: '400px'}, function() {
      $(event.target).css({top: 0});
      binding();
    });
  };

  binding();
});

演示：http: //jsbin.com/adokiz/3

Answer 3

使用unbind方法：

var clickHandle = function(){
    $(this).unbind('click', clickHandle);
    callfunc();
};
var callfunc = function(){
    // do your stuff
    $('#imageid').click(clickHandle);// reinstall click handle
};
$('#imageid').click(clickHandle);