JavaScript でいろいろやっていると、イベントの制御に苦労します。

JavaScript でウィンドウを表示させて、ウィンドウの外側をクリックされたら閉じるといった制御。

例えば・・・
<script><br />jQuery(function ($) {<br /> $('.opn').click(function () {<br /> $('.win').show();<br /> return false;<br /> });<br /><br /> $('.win').click(function () {<br /> $('.win').hide();<br /> return false;<br /> });<br />});<br /></script><br /><style><br />.win{<br /> display: none;<br /> background-color: rgba(0,0,0,0.75);<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> bottom: 0;<br /> right: 0;<br /> text-align: center;<br /><br />}<br />.inwin{<br /> width: 80%;<br /> margin: 20% auto 20px;<br /> background-color: #fff;<br /> padding: 50px;<br />}<br />.opn{<br /> margin:10px;<br /> padding:10px;<br /> border:1px solid #ccc;<br />}<br /></style><br /><div style="margin:10px; padding:10px;border:1px solid #ccc; position: relative;height:400px;"><br />ここは class win の領域<br /> <div class="opn">ウィンドウ開く</div><br /> <div class="win"><br /> <div class="inwin"><br />ここは、class win の領域、仮設ステージ、ウィンドウだよ～。<br /><br /> ウィンドウ開けた♪<br /> </div><br /> </div><br /></div><br />


このウィンドウ（白い枠内）を閉じるのは、白い枠内でも外側でもクリックすると閉じます。
それだと、ウィンドウ（白い枠内）は、単なる表示にしか使えません。

白い枠内(inwin)をくりっくすると閉じてしまうのは、 inwin のクリックイベントが その親の win へ伝達されてしまうからです。

そこで、inwin内で発生したイベントを win へ伝えないことで、それを回避することができます。

子供の喧嘩に親に口を出させないコマンドが stopPropagation();

<script><br />jQuery(function ($) {<br /> $('.opn').click(function () {<br /> $('.win').show();<br /> return false;<br /> });<br /><br /> $('.win').click(function () {<br /> $('.win').hide();<br /> return false;<br /> });<br /><br /> $('.inwin').click(function (event) {<br /> event.stopPropagation(); // 親に教えない<br /> });<br /><br /> $('.winclose').click(function (event) {<br /> event.preventDefault(); // 親に教える<br /> });<br />　　　　　<br />});<br /></script><br /><style><br />.win{<br /> display: none;<br /> background-color: rgba(0,0,0,0.75);<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> bottom: 0;<br /> right: 0;<br /> text-align: center;<br /><br />}<br />.inwin{<br /> width: 80%;<br /> margin: 20% auto 20px;<br /> background-color: #fff;<br /> padding: 50px;<br />}<br />.opn , .winclose{<br /> margin:10px;<br /> padding:10px;<br /> border:1px solid #ccc;<br />}<br /></style><br /><div style="margin:10px; padding:10px;border:1px solid #ccc; position: relative;height:400px;"><br />ここは class win の領域<br /> <div class="opn">ウィンドウ開く</div><br /> <div class="win"><br /> <div class="inwin"><br />ここは、class win の領域、仮設ステージ、ウィンドウだよ～。<br /><br /> ウィンドウ開けた♪<br /> <div class=winclose">閉じる</div><br /> </div><br /> </div><br /></div><br />

inwin のクリックは、親に教えないけど、 winclose 内で起こったクリックは、親に教える＝win を閉じる。

preventDefault() と stopPropagation() って何だ？の答え

イベントを親に教えるか教えないかを切り替えるコマンドです。

ウィンドウを右クリックされたら何かしたい。

そんなときには、親である window 本体への告げ口を止める stopPropagation を使ってあげればいいわけです。
様々なところで　コンテキストメニューをうんたらとかいう説明がありますが、つまりそういうことです。

ブラウザ上での右クリックは、コンテキストメニュー（ソースを表示とか画像を保存とかのコマンドメニューのこと）が
開かれてしまうので、親ウインドウへの告げ口を止めたり、告げ口を開始したりするんです。