使用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')將失敗。

希望這足夠清楚。