防止多次触发jQuery中的点击事件

我已经创建了jQuery content switcher。一般来说，它工作正常，但它有一个问题。如果多次单击侧面的链接，有时会看到多个内容。防止多次触发jQuery中的点击事件

这个问题很可能存在于点击事件中的某处。下面是代码：

$('#tab-list li a').click(
    function() { 
     var targetTab = $(this).attr('href'); 
     if ($(targetTab).is(':hidden')) { 
      $('#tab-list li').removeClass('selected'); 
      var targetTabLink = $(this).parents('li').eq(0); 
      $(targetTabLink).addClass('selected'); 
      $('.tab:visible').fadeOut('slow', 
       function() { 
        $(targetTab).fadeIn('slow'); 
       } 
      ); 
     } 
     return false; 
    } 
);

我试图加把锁的过渡，以便为转变正在发生进一步的点击将被忽略，但无济于事。我也试图阻止，如果事情已经在动画，使用以下触发过渡：

if ($(':animated')) { 
    // Don't do anything 
} 
else { 
    // Do transition 
}

但它似乎总是认为事情正在动画。任何想法，我可以防止多次触发动画？

来源

2009-06-18 White Elephant

一个想法是在您的函数开始时删除click事件，然后在动画完成时将点击事件添加回来，所以在持续时间期间点击不起作用。

如果你有能力在动画完成时执行代码，这应该工作。

来源

2009-06-18 12:58:00

天才。今天用这个答案保存了我的屁股，找不到为什么多个点击事件正在注册，我认为jQuery会很聪明并且停止它的发生，jQuery不能为你做所有事情，因为事实证明。谢谢。 – 2011-11-03 01:14:50

一个方法是这样的：

$('#tab-list ul li').one('click', loadPage); 
var loadPage = function(event) { 
    var $this = $(this); 
    $global_just_clicked = $this; 
    var urlToLoad = $this.attr('href'); 
    $('#content-area').load(urlToLoad, pageLoaded); 
} 
$global_just_clicked = null; 
var pageLoaded() { 
    $global_just_clicked.one('click', loadPage); 
}

正如你所看到的，这种方法是充满了缺点：在当前页面加载之前单击另一个选项卡会发生什么？如果请求被拒绝，该怎么办？如果它满月呢？

答案是：这种方法只是一个基本的演示。一个适当的实施将：

不包含全局变量$global_just_clicked
不依赖于。将使用.ajax()，并处理请求取消，点击其他标签等

注意：在大多数情况下，你不需要采取这种循环的方法。我相信你可以通过多次点击到同一个标签的方式来补救你的代码不会影响最终结果。

jrh。

来源

2009-06-18 13:03:31 jrharshath

添加一个变量用作锁而不是（：animating）。

点击，检查锁是否设置。如果没有，请设置锁定，启动进程，然后在淡入淡出完成时释放锁定。

var blockAnimation = false; 

$('#tab-list li a').click(
    function() { 
     if(blockAnimation != true){ 
     blockAnimation = true; 
     var targetTab = $(this).attr('href'); 
     if ($(targetTab).is(':hidden')) { 
      $('#tab-list li').removeClass('selected'); 
      var targetTabLink = $(this).parents('li').eq(0); 
      $(targetTabLink).addClass('selected'); 
      $('.tab:visible').fadeOut('slow', 
       function() { 
        $(targetTab).fadeIn('slow', function(){ blockAnimation=false; }); 
       } 
      ); 
     } 
     } 
     return false; 
    } 
);

来源

2009-06-18 13:04:50 Ben

我试过这种方法，但似乎无法得到它的工作。它每次都通过了锁定测试。 – 2009-06-18 13:44:27

我的代码前面玩弄周围，并作以下修改这似乎工作上来：

$('#tab-list li a').click(
    function() { 
     $('.tab:animated').stop(true, true); 
     var targetTab = $(this).attr('href'); 
     if ($(targetTab).is(':hidden')) { 
      $('#tab-list li').removeClass('selected'); 
      var targetTabLink = $(this).parents('li').eq(0); 
      $(targetTabLink).addClass('selected'); 
      $('.tab:visible').fadeOut('slow', 
       function() { 
        $(targetTab).fadeIn('slow'); 
       } 
      ); 
     } 
     return false; 
    } 
);

所发生的一切时，点击一个新的标签时，它会立即带来的电流动画到最后，然后开始新的过渡。

来源

2009-06-18 13:50:38

嗯，这是我做到了这一点，它工作得很好。

$(document).ready(function() { 
    $(".clickitey").click(function() { 
     if($("#mdpane:animated").length == 0) { 
      $("#mdpane").slideToggle("slow"); 
      $(".jcrtarrow").toggleClass("arrow-open"); 
     } 
    }); 
});

这不是在做你的代码做什么ofcourse这是从我的网站代码，但我只是想点我怎么忽略了动画过程中发生的点击。请让我知道这是否无效。谢谢。要做到这一点

来源

2010-08-05 07:48:55

一种方法使用事件的timeStamp财产像这样的差距多次点击之间的某个时间：

var a = $("a"), 
    stopClick = 0; 


a.on("click", function(e) { 
    if(e.timeStamp - stopClick > 300) { // give 300ms gap between clicks 
    // logic here 

    stopClick = e.timeStamp; // new timestamp given 
    } 


});

来源

2014-11-14 07:15:33

防止多次触发jQuery中的点击事件

回答

相关问题