preventDefault() と stopPropagation() って何だ?


スポンサーリンク

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

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

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



ここは class win の領域
ウィンドウ開く


ここは、class win の領域、仮設ステージ、ウィンドウだよ~。
ウィンドウ開けた♪

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

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

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

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

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


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

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


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

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

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

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

スポンサーリンク