檢測元件褪色真或假的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安排了動畫，但在運行之前會返回（實際上，在它開始之前已啓動）。

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

Answer 2

這裏嘗試使用e.stopPropagation()：

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

採取的事實，.fadeIn允許你指定被調用時，在動畫完成回調函數的優勢

修復此您也不需要檢查hasClass()，只需：

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

Answer 3

點擊「#div」上將會執行兩個

1-的#div點擊事件

2-文檔點擊事件因斯的「#div」是文件的一個元素。

爲了防止這種行爲，只是寫

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

停止事件傳播給家長的元素。

UPDATE

我看到一些答案依靠event.target屬性檢查是否被點擊的#div或其他元素，但是這是一個錯誤的解決。

我解釋爲什麼：

如果#div元素具有內它的另一個元素和用戶點擊該元素上。

實施例：

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

和在標題或＃嵌套-div元素用戶點擊。

在這種情況下，$(event.target).is('#div')將失敗。

希望這已經夠清楚了。