jQueryでの泡立ちを阻止する方法の紹介

一、泡立ち事件の概要
コントロールをクリックすると、このコントロールを含む親コントロールにもclickイベントがある場合、実行が続行されます.例えばdivの下のaにはclickイベントがあり、aをクリックするとalertが2回現れます.この現象をバブル事件と呼ぶ.
このイベントは元の要素からDOMツリーの最上層まで泡が立ち始めた.ターゲット要素:どのイベントのターゲット要素も最初の要素であり、この例ではボタンであり、エレメントオブジェクトに属性として表示されます.イベントエージェントを使用すると、イベントプロセッサをエレメントに追加し、サブエレメントからイベントが泡を立てるのを待つことができ、このイベントがどのエレメントから始まるかを簡単に知ることができます.注意:blur、focus、load、unloadは他のイベントのように泡を立てることはできません.実際にblurとfocusは、イベントバブルではなくイベントキャプチャ法で得ることができる(IE以外の他のブラウザで).
二、jQuery事件の泡立ちを阻止する
jQueryはDOMのイベントトリガに対してバブル特性を有する.この特性を利用すると、重複コードを減らすことができますが、イベントのバブルを望んでいない場合があります.この時はjQueryを止めるEventが泡立つ.
jQueryでEventの文書の冒頭で知ったjQuery.Eventオブジェクトは、W 3 C規格に準拠するイベントオブジェクトであり、jQuery.Eventは互換性IEをチェックするステップを免除した.jQuery.Eventはイベントのバブルを阻止するための非常に簡単な方法を提供した:event.stopPropagation();

 
  
$("p").click(function(event){ 
  
     event.stopPropagation(); 
  
     // do something 
  
}) 
 

しかし、この方法はliveバインドを使用するイベントには役に立たず、イベントのバブルを阻止するより簡単な方法が必要です:return false;

 
  
$(this).after("Another paragraph!"); 
   
  
return false;  });
 
 

複数のブラウザの終了バブル関数に対応:

 
  
   function stopDefault(e) { 
  
        //         (W3C) 
  
        if (e && e.preventDefault) 
  
            e.preventDefault(); 
  
        //IE              
  
        else 
  
            window.event.returnValue = false; 
  
        return false; 
  
    } 
  
 
 

三、eventを使う.tatget属性明確イベントオブジェクト
イベントハンドラの変数eventはイベントオブジェクトを保存します.それでtatgetプロパティには、イベントが発生するターゲット要素が保存されます.この属性はDOM APIで規定されているが,すべてのブラウザで実現されていない.jQueryは、このイベントオブジェクトを必要に応じて拡張し、どのブラウザでもこのプロパティを使用できるようにします.通過するtargetは、DOMで最初にイベントを受信した要素を決定することができる.また,thisがイベントを処理するDOM要素を参照していることを知っている.
イベントを使用tatget属性明確イベントオブジェクト
イベントのバブルを阻止するコードは次のとおりです.

 
  
$(document).ready(function() { 
  
    $('switcher').click(function(event){ 
  
        if(event.target == this) 
  
        { 
  
            $('switcher .button').toggleClass('hidden'); 
  
        } 
  
    };) 
  
});