jQuery – 如何在动画或函数运行时删除事件处理程序？

我正在尝试创建一个图库。 在底部我有一条缩略图，这些缩略图在您单击箭头时左右滑动，但如果您多次单击箭头则会询问该function。

我想在运行函数时删除单击处理程序，然后再次替换它。

在旁注中，我的缩略图滚动条使用margin-left来设置动画，是否可以使用scrollTo或类似方法，以水平方式移动元素特定量，因此如果缩略图改变大小，它仍然可以工作？

Answer 1

有很多方法可以做到这一点。 最简单的方法是不删除单击处理程序，但如果它已经动画化，则只在回调中不执行任何操作，例如：

$('.thumb').click(function() { if ($('#thumb-strip:animated').size() != 0) return; /* else animate #thumb-strip */ }); 

如果要删除单击处理程序并在之前添加，只需执行以下操作：

 var animateHandler = function() { var params = {}; // animate params $('.thumb').unbind('click', animateHandler); // unbind the click handler $('#thumb-strip').animate(params, function() { $('.thumb').click(animateHandler); // re-bind the click handler when animation is done }); }; $('.thumb').click(animateHandler); 

不用说，第一种方式更简单。

然而，我通常做的不是阻止点击事件发生，因为用户不会期望，但我也想摆脱动画的排队。 所以你可以做的是允许用户点击一个拇指，并使其立即动画到stop的新地方：

 $('.thumb').click(function() { var params = {}; // animate params $('#thumb-strip').stop().animate(params); }); 

这是最简单，最直观的解决方案。

要回答你的第二个问题，你可以使用$(this).position()来获得拇指与父母的相对位置，然后根据它进行动画制作。