任意の場所をクリックして隠したい要素を隠す(BUG/jQuery版なし)

1>1つ目は2つのステップに分かれています
1):documentのclickイベントにイベントハンドラをバインドし、divを非表示にする
2):divのclickイベントにイベントハンドラをバインドし、イベントのバブルを阻止し、documentにバブルを防止し、documentを呼び出すonclickメソッドはdivを非表示にします.

 1  
<span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">function</span><span style="color: #000000;"> stopPropagation(e) { 
</span><span style="color: #008080;"> 3</span>         <span style="color: #0000ff;">if</span><span style="color: #000000;"> (e.stopPropagation) 
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">        e.stopPropagation(); 
</span><span style="color: #008080;"> 5</span>         <span style="color: #0000ff;">else</span> 
<span style="color: #008080;"> 6</span>         e.cancelBubble = <span style="color: #0000ff;">true</span><span style="color: #000000;">; 
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">    } 
</span><span style="color: #008080;"> 8</span> 
<span style="color: #008080;"> 9</span>     $(document).bind('click',<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ 
</span><span style="color: #008080;">10</span>         $('#test').css('display','none'<span style="color: #000000;">); 
</span><span style="color: #008080;">11</span> <span style="color: #000000;">    }); 
</span><span style="color: #008080;">12</span> 
<span style="color: #008080;">13</span>     $('#test').bind('click',<span style="color: #0000ff;">function</span><span style="color: #000000;">(e){ 
</span><span style="color: #008080;">14</span> <span style="color: #000000;">        stopPropagation(e); 
</span><span style="color: #008080;">15</span> <span style="color: #000000;">    }); 
</span><span style="color: #008080;">16</span>  

このようにページ非div領域をクリックすると、直接または層状の泡がdocumentのonclickメソッドを呼び出し、divを非表示にし、divまたはそのサブ要素をクリックすると、
イベントは常にバブルを起こすdiv自体であり、イベントがバブルを続けることを阻止し、doumentのonclickメソッドを呼び出さずにdivを隠し、私たちのニーズを完了します. 
2>2番目
前述したように,DOM上のイベントをトリガするとイベントに関するすべての情報,イベントを生成する要素,イベントタイプなどの関連情報を含むイベントオブジェクトeventが生成され,構想1でdivのclickイベントハンドラが伝達するパラメータがこのeventオブジェクトである.IE内のeventオブジェクトへのアクセスには、指定されたイベントハンドラの方法に応じていくつかの異なる方法がある.DOM要素に直接イベントハンドラを追加する場合、eventオブジェクトはwindowオブジェクトの属性として存在します.
eventオブジェクトには、トリガイベントの元の要素を識別するtarget(W 3 C)/src Element(IE)という重要な属性が含まれています.考え方としては、この属性を利用することです.documentのclickイベントに直接イベントハンドラをバインドし、イベントハンドラでイベントソースがid=testのdiv要素またはそのサブ要素であるかどうかを判断し、そうでなければメソッドreturnは操作せず、そうでなければdivを非表示にすることができます.

 1  
<span style="color: #008080;"> 2</span> 　　$(document).bind('click',<span style="color: #0000ff;">function</span><span style="color: #000000;">(e){ 
</span><span style="color: #008080;"> 3</span> 　　　　<span style="color: #0000ff;">var</span> e = e || window.event; <span style="color: #008000;">//</span><span style="color: #008000;">       </span>
<span style="color: #008080;"> 4</span> 　　　　<span style="color: #0000ff;">var</span> elem = e.target ||<span style="color: #000000;"> e.srcElement; 
</span><span style="color: #008080;"> 5</span> 　　　　<span style="color: #0000ff;">while</span> (elem) { <span style="color: #008000;">//</span><span style="color: #008000;">        ，      div    </span>
<span style="color: #008080;"> 6</span> 　　　　<span style="color: #0000ff;">if</span> (elem.id && elem.id=='test'<span style="color: #000000;">) { 
</span><span style="color: #008080;"> 7</span> 　　　　　　<span style="color: #0000ff;">return</span><span style="color: #000000;">; 
</span><span style="color: #008080;"> 8</span> 　　　　<span style="color: #000000;">} 
</span><span style="color: #008080;"> 9</span> 　　　　　　elem =<span style="color: #000000;"> elem.parentNode; 
</span><span style="color: #008080;">10</span> 　　　　<span style="color: #000000;">} </span>
<span style="color: #008080;">12</span> 　　　　$('#test').css('display','none'); <span style="color: #008000;">//</span><span style="color: #008000;">     div      </span>
<span style="color: #008080;">13</span> 　　<span style="color: #000000;">}); 
</span><span style="color: #008080;">14</span>  

これにより、ページのどこをクリックしてもdocumentのclickイベントに次々とバブルが発生し、イベントハンドラはイベントソースがid=testのdivまたはそのサブ要素であるかどうかを判断します.
メソッドreturnであれば、divを非表示にして、私たちのニーズを実現することができます.