使用jQuery检测元素淡出真假

Question

所以，我有一个元素$('#div') ，我有一个类似的事件：

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

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

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

当我单击页面上的某处时，我需要淡出元素，但前提是我的元素具有“ closesable”类。

在我的示例中，当我单击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-文档单击事件，因为“ #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')将失败。

希望这足够清楚。