○コード
$(document).click(function(event) { // (1)
if (!$.contains($("#popup")[0], event.target)) { // (2)
$("#popup").hide();
}
});
○解説
ポイントは、$.contains( container, contained )
このメソッドは、DOM要素containerがDOM要素containedを 内包していたらtrueを返します。
ちなみに、containerとcontainedはjQueryオブジェクトではなくて、
DOM要素なので気をつけて！
では、コードの解説。
上述のコード(1)では、すべてのクリックイベントを捕捉しないといけないので、 document要素に対してハンドラをバインドします。
コード(2)では、$.contains()の第1引数にポップアップ要素であるDOM要素を指定してます。 $("#popup")はjQueryオブジェクトなので、$("#popup")[0]とすることでDOM要素を取得してます。
そして第2引数には、イベントオブジェクトeventのプロパティで、イベント発生源のDOM要素が格納されている event.targetを指定します。
さらに$.contains()の前に"否定"を意味するビックリマーク!をつけます。
ということでここでは、ポップアップ要素の中にクリックイベント発生源の要素が存在しなかったら、 つまりポップアップの外側でクリックされたらtrueを返すということになり、
このときポップアップを非表示にするという処理が実行されます。
参考
http://s3pw.com/milestoner/2013/06/jquery-tips-for-closing-popup/
