event.stopImmediatePropagation()

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>

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>

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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, イベント・オブジェクト タグ: パーマリンク