event.stopPropagation()は、現在のイベントで、イベントバブルを止めるメソッド。
イベントバブルとは、子要素のイベントが発生すると、その親要素や先祖要素の同じタイプのイベントが発生すること。
構文
event.stopPropagation()
サンプル
sample1：
sample2：
sample3：
サンプルの動作について
- idが「sample1」であるDIV要素をクリックすると、「sample1：」の右横に「クリックしましたね♪」と表示する。
- idが「sample2」であるDIV要素をクリックすると、「sample2：」の右横に「クリックしましたね♪」と表示する。「sample1：」の右横には表示しない点に注目。
- idが「sample3」であるDIV要素をクリックすると、「sample2：」と「sample3：」の右横に「クリックしましたね♪」と表示する。「sample1：」の右横には表示しない点に注目。
- 「リセット」ボタンをクリックすると、表示したテキストを消し、元の状態に戻す。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sample1" ).onclick = function( $event ){
document.getElementById( "sample1output" ).innerHTML = "クリックしましたね♪";
};
document.getElementById( "sample2" ).onclick = function( $event ){
document.getElementById( "sample2output" ).innerHTML = "クリックしましたね♪";
$event.stopPropagation();
};
document.getElementById( "sample3" ).onclick = function( $event ){
document.getElementById( "sample3output" ).innerHTML = "クリックしましたね♪";
};
document.getElementById( "sampleReset" ).onclick = function(){
document.getElementById( "sample1output" ).innerHTML = "";
document.getElementById( "sample2output" ).innerHTML = "";
document.getElementById( "sample3output" ).innerHTML = "";
};
}
</script>
window.onload = function () {
document.getElementById( "sample1" ).onclick = function( $event ){
document.getElementById( "sample1output" ).innerHTML = "クリックしましたね♪";
};
document.getElementById( "sample2" ).onclick = function( $event ){
document.getElementById( "sample2output" ).innerHTML = "クリックしましたね♪";
$event.stopPropagation();
};
document.getElementById( "sample3" ).onclick = function( $event ){
document.getElementById( "sample3output" ).innerHTML = "クリックしましたね♪";
};
document.getElementById( "sampleReset" ).onclick = function(){
document.getElementById( "sample1output" ).innerHTML = "";
document.getElementById( "sample2output" ).innerHTML = "";
document.getElementById( "sample3output" ).innerHTML = "";
};
}
</script>
idが「sample2」であるDIV要素のクリックイベントに、event.stopPropagation()を設定してある点に注目。
HTML
<p><button id="sampleReset">リセット</button></p>
<div id="sample1">
<p>sample1：<span id="sample1output"></span></p>
<div id="sample2">
<p>sample2：<span id="sample2output"></span></p>
<div id="sample3">
<p>sample3：<span id="sample3output"></span></p>
</div>
</div>
</div>
<div id="sample1">
<p>sample1：<span id="sample1output"></span></p>
<div id="sample2">
<p>sample2：<span id="sample2output"></span></p>
<div id="sample3">
<p>sample3：<span id="sample3output"></span></p>
</div>
</div>
</div>
CSS
<style>
#sample1,
#sample2,
#sample3 {
padding: 10px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
</style>
#sample1,
#sample2,
#sample3 {
padding: 10px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
</style>