event.isImmediatePropagationStopped()

jQuery API の event.isImmediatePropagationStopped() は、stopImmediatePropagation() でイベントバブリングを停止させたかどうかを返すメソッド。stopImmediatePropagation() でイベントバブリングを停止済みの場合は、「true」を返し、停止済みでない場合は、「false」を返す。

イベントバブリングとは、イベントを発生させた要素から、DOMツリーを上るように、泡が浮き上がるように、親要素へ伝搬すること。

実装例(サンプル)

緑色: クリックイベント発生中

青色: クリックイベント発生中

赤色: クリックイベント発生中

青色の event.isImmediatePropagationStopped():

赤色の event.isImmediatePropagationStopped():

実装例(サンプル)の動作について

  • 緑色の部分をクリックすると、サンプル全体が点滅し、「緑色: 」の右横で、「クリックイベント発生中」というテキストを点滅表示させる。
  • 青色の部分をクリックすると、サンプル全体が点滅し、「緑色: 」と「青色: 」の右横で、「クリックイベント発生中」というテキストを点滅表示させる。「青色の event.isImmediatePropagationStopped(): 」の右横に、フェードイン・フェードアウトで「false」と表示。
  • 赤色の部分をクリックすると、赤色の部分が点滅し、「赤色: 」の右横で、「クリックイベント発生中」というテキストを点滅表示させる。「赤色の event.isImmediatePropagationStopped(): 」の右横に、フェードイン・フェードアウトで「true」と表示

実装例(サンプル)のソースコード

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-isImmediatePropagationStopped-1' ) . fadeIn( 2000 ) . text( event.isImmediatePropagationStopped() ) . fadeOut( 3000 );
    } );
    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-isImmediatePropagationStopped-2' ) . fadeIn( 2000 ) . text( event.isImmediatePropagationStopped() ) . fadeOut( 3000 );
    } );
} );
// -->
</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 {
    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>青色の event.isImmediatePropagationStopped(): <span id="jquery-api-event-isImmediatePropagationStopped-1"></span></p>
<p>赤色の event.isImmediatePropagationStopped(): <span id="jquery-api-event-isImmediatePropagationStopped-2"></span></p>

スポンサード リンク

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