document.click沒有一個DIV

Question

<table id="tab"> 
    <tr><td class="click" id="111">111</td> <td id="222" class="click">222</td></tr> 
    <tr><td class="click" id="333">333</td> <td id="444" class="click">444</td></tr> 
</table> 

<div id="hidden" class="ooo"> 
    text 
</div> 


#tab tr td { 
padding: 10px; 
    border: solid 1px red; 
} 

#hidden { 
    background-color:green; 
    width: 40px; 
    height: 40px; 
    display: none; 
} 

$(".click").click(function(e){ 
    $("#hidden").show(); 
    $("#hidden").offset({top: $(this).offset().top, left: $(this).offset().left+10}); 
    e.stopPropagation(); 
}) 
$(document).click(function() { 
    $('#hidden').hide(); 
}); 

http://jsfiddle.net/QyRnH/9/

可以禁用#hidden如果我在#hidden點擊？ :)我想隱藏div只隱藏在外面#hidden。

Answer 1

您可以檢測被點擊的元素恰好在你$(document).click功能通過檢查event.target。所以你可以比較它的id並確保它不是#hidden。

$(document).click(function(event) { 
    if (event.target.id != 'hidden') { 
     $('#hidden').hide(); 
    } 
}); 

這是你更新的jsfiddle：http://jsfiddle.net/QyRnH/15/

Answer 2

答案已經在您的代碼中。基本上，你想向上冒泡到文檔元素的#hidden DIV停止click事件：

$("#hidden").click(function (e) { 
    e.stopPropagation(); 
    // do stuff 

}); 

• http://api.jquery.com/event.stopPropagation/