如何防止在动画完成之前点击 html 元素？

Posted 2023-05-08

【中文标题】如何防止在动画完成之前点击 html 元素？

【英文标题】：How can i prevent click on a html element before completion of animation?

【发布时间】：2012-06-09 11:58:01

【问题描述】：

我正在使用 div 上的点击事件绑定来展开/折叠 div。 展开/折叠使用发生 $('#myid').animate(myfunctiontocollapse/expand)。 现在例如 div 的高度为零，我单击 div 展开它，然后在完成展开之前再次单击它，调用折叠代码并且 div 变形。 折叠/展开时如何防止第二次点击事件？

【问题讨论】：

可以使用.stop(true)，可以解绑点击事件。

【参考方案1】：

取消绑定单击，然后将处理程序重新绑定为完成参数的一部分

不清楚您的动画功能是什么，但show() 可能是您更好的选择：

var myClickHandler = function(el)
    $(el).unbind("click");
    $('#myid').show('slow', function()  $("#mytrigger").click(myClickHandler) 

$('#mytrigger').click(myClickHandler);

如果您的函数确实是自定义的，您也可以对 animate() 执行相同的操作。

【参考方案2】：

您可以在 click 函数中检查它是否仍在动画，如果是则返回 false 以防止默认的点击动作和传播。

if($('#myid').is(':animated'))
    return false;

【参考方案3】：

你可以使用jQuery的.stop()http://api.jquery.com/stop/方法来停止当前正在运行的动画。

这是一个示例代码。

$('#hoverme-stop-2').hover(function() 
  $(this).find('img').stop(true, true).fadeOut();
, function() 
  $(this).find('img').stop(true, true).fadeIn();
);

【讨论】：

我不想停止动画。如果第二次触发，我想停止点击事件。