jQuery API の event.stopImmediatePropagation() は、イベントバブリングを停止し、さらに、以降のイベントハンドラも実行しないようにするメソッド。イベントバブリングとは、イベントを発生させた要素から、DOMツリーを上るように、泡が浮き上がるように、親要素へ伝搬すること。
実装例（サンプル）
緑色: クリックイベント発生中
青色: クリックイベント発生中
赤色: クリックイベント発生中
他のイベントハンドラ: 実行
実装例（サンプル）の動作について
- 緑色の部分をクリックすると、サンプル全体が点滅し、「緑色: 」の右横で、「クリックイベント発生中」というテキストを点滅表示させる。
- 青色の部分をクリックすると、サンプル全体が点滅し、「緑色: 」と「青色: 」の右横で、「クリックイベント発生中」というテキストを点滅表示させる。さらに、「他のイベントハンドラ: 」の右横で、「実行」というテキストを点滅させる。
- 赤色の部分をクリックすると、赤色の部分が点滅し、「赤色: 」の右横で、「クリックイベント発生中」というテキストを点滅表示させる。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-events' ) . click( function( event ) {
jQuery( this ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 );
jQuery( '#jquery-api-event-green' ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 );
} );
jQuery( '#jquery-api-event-click-1' ) . click( function( event ) {
jQuery( this ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 );
jQuery( '#jquery-api-event-blue' ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 );
} );
jQuery( '#jquery-api-event-click-2' ) . click( function( event ) {
event . stopImmediatePropagation()
jQuery( this ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 );
jQuery( '#jquery-api-event-red' ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 );
} );
jQuery( '#jquery-api-event-click-1,#jquery-api-event-click-2' ) . click( function() {
jQuery( '#jquery-api-event-handler' ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-events' ) . click( function( event ) {
jQuery( this ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 );
jQuery( '#jquery-api-event-green' ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 );
} );
jQuery( '#jquery-api-event-click-1' ) . click( function( event ) {
jQuery( this ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 );
jQuery( '#jquery-api-event-blue' ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 );
} );
jQuery( '#jquery-api-event-click-2' ) . click( function( event ) {
event . stopImmediatePropagation()
jQuery( this ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 );
jQuery( '#jquery-api-event-red' ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 );
} );
jQuery( '#jquery-api-event-click-1,#jquery-api-event-click-2' ) . click( function() {
jQuery( '#jquery-api-event-handler' ) . fadeIn( 500 ) . fadeOut( 500 ) . fadeIn( 500 ) . fadeOut( 500 );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-events {
padding: 20px 10px;
width: 264px;
background-color: green;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
#jquery-api-event-click-1, #jquery-api-event-click-2 {
margin: 5px;
padding: 5px 0px;
width: 120px;
height: 50px;
text-align: center;
float: left;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
color: white;
}
#jquery-api-event-click-1 {
background-color: blue;
}
#jquery-api-event-click-2 {
background-color: red;
}
#jquery-api-event-green, #jquery-api-event-blue, #jquery-api-event-red, #jquery-api-event-handler {
display: none;
}
-->
</style>
<!--
#jquery-api-events {
padding: 20px 10px;
width: 264px;
background-color: green;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
#jquery-api-event-click-1, #jquery-api-event-click-2 {
margin: 5px;
padding: 5px 0px;
width: 120px;
height: 50px;
text-align: center;
float: left;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
color: white;
}
#jquery-api-event-click-1 {
background-color: blue;
}
#jquery-api-event-click-2 {
background-color: red;
}
#jquery-api-event-green, #jquery-api-event-blue, #jquery-api-event-red, #jquery-api-event-handler {
display: none;
}
-->
</style>
HTML
<div id="jquery-api-events">
<div id="jquery-api-event-click-1"></div>
<div id="jquery-api-event-click-2"></div>
<div style="clear:left;"></div>
</div>
<p>緑色: <span id="jquery-api-event-green">クリックイベント発生中</span></p>
<p>青色: <span id="jquery-api-event-blue">クリックイベント発生中</span></p>
<p>赤色: <span id="jquery-api-event-red">クリックイベント発生中</span></p>
<p>他のイベントハンドラ: <span id="jquery-api-event-handler">実行</span></p>
<div id="jquery-api-event-click-1"></div>
<div id="jquery-api-event-click-2"></div>
<div style="clear:left;"></div>
</div>
<p>緑色: <span id="jquery-api-event-green">クリックイベント発生中</span></p>
<p>青色: <span id="jquery-api-event-blue">クリックイベント発生中</span></p>
<p>赤色: <span id="jquery-api-event-red">クリックイベント発生中</span></p>
<p>他のイベントハンドラ: <span id="jquery-api-event-handler">実行</span></p>