使用jQuery检测元素衰落的真或假

Question

所以，我有一个元素$('#div')，我有一个像：

这样的事件

$('#div').click(function(){
    $("#element").fadeIn();
    $("#div").addClass("closable");
});

现在，我在文件上还有另一个事件：

$(document).click(function(){
  if($('#div').hasClass('closable')){
      $("#element").fadeOut();
  }
});

当我点击页面上的某个地方时，我需要淡出我的元素，但前提是我的元素具有“可关闭的”类。

在我的例子中，当我点击我的div时，我的元素立即淡出并淡出...我怎么能这样做？

Answer 1

问题是您在淡入动画开始后添加了类closable，而不是在完成之后。这是因为.fadeIn计划动画但在运行之前返回（实际上，在它甚至启动之前）。

通过利用.fadeIn允许您指定在动画完成时调用的回调函数这一事实来解决此问题：

$('#div').click(function(){
    $("#element").fadeIn(function() { $("#div").addClass("closable") });
});

Answer 2

尝试在此处使用e.stopPropagation()：

$('#div').click(function(e){
    e.stopPropagation();
    $("#element").fadeIn();
    $(this).addClass("closable");
});

，您也不需要检查hasClass()，只需要：

$(document).click(function(){
    $("#element").fadeOut();
});

Answer 3

点击'#div'将同时执行

1- #div点击事件

2-文档点击事件ince'#div'是文档的一个元素。

要防止出现这种情况，请写下

$('#div').click(function(e){
    $("#element").fadeIn();
    $("#div").addClass("closable");
    e.stopPropagation();
});

停止事件传播到父元素。

<强>更新

我看到一些依赖于event.target属性的答案来检查#div是否被点击或其他元素，但这是错误的解决方案。

我解释原因：

如果#div元素中包含其他元素，并且用户单击该元素。

示例：

<div id="div">
  <h2>Title</h2>
  <div id="nested-div'>Content goes here</div>
</div>

并且用户单击标题或#nested-div元素。

在这种情况下，$(event.target).is('#div')将失败。

希望这很清楚。