jQueryを使用して、特定の要素内でクリックイベントが発生するかどうかを判断するにはどうすればよいですか？

Question

次のコードを使用してブロックをアニメーションしています。私のコードでは、div_animate()は、現在表示されている場合は、指定されたセレクタで<div>を本質的に隠しています。

$(document).click(function(event){ 
    if (/* the event's target has a parent of #container */) { 
     return false; 
    } else { 
     div_animate("#container"); 
    } 
}); 

：私の知る限り、このためのコードは次のようになります - 私は、ユーザーが #containerの子をクリックしたかどうかを判断するためにそうであれば、 return false;が必要

$(document).click(function(event){ 
    div_animate("#container"); 
}); 

どのような考えですか？

Answer 1

最も簡単な方法は、次のようになります。

if ($(event.target).is('#container *, #container')) // edited - thanks @gnarf 
    // is a child 
else 
    // is not a child 

あなたはそれがターゲット（または非標的）コンテナの子だかどうかを検出するために作ることができるさまざまな選択肢があります。それはちょうど1つです。代替：

if ($(event.target).closest('#container').length) 

Answer 2

クリックはこのように、#container上または発祥の場合は、アクションを防ぐことができます。

$(document).click(function(event){ 
    var c = $("#container")[0]; 
    if (event.target == c || $.contains(c, event.target)) { 
     return false; 
    } else { 
     div_animate("#container"); 
    } 
}); 

それは#container自体から来た場合は、最初のチェックは、第二は、それならばです子供から来た、その#container$.contains()。完全に代替、簡単な方法は、このように、#containerをクリックしたときだけdocumentまでのバブルを防ぐためです：

$("#container").click(function(e) { 
    e.stopPropagation(); 
}); 
$(document).click(function() { 
    div_animate("#container"); 
});