jQueryの中で泡事件を阻止する方法を紹介します。


一、突発事件の概要
コントロールをクリックすると、このコントロールを含む親コントロールにもclickイベントがある場合は、続行します。例えば、divの下のaは全部click事件があって、aをクリックする時、alertは2回現れます。この現象を発泡事件といいます。
このイベントは元の元素からDOMツリーの最上層まで泡が立ちます。ターゲット要素:いずれかのイベントのターゲット要素は、最初の要素であり、この例ではボタンであり、私たちの元素オブジェクトに属性として現れます。イベントエージェントを使うと、イベントプロセッサを要素に追加して、イベントがそのサブレベルの要素から泡が出るのを待っています。そして、このイベントがどの要素から始まるのかを簡単に知ることができます。注意:blur、focus、ロードとunloadは他の事件のように泡を立てることができません。実際にはblurおよびfocusは、イベントの泡ではなくイベントキャプチャの方法で取得することができる(IE以外の他のブラウザで)。
二、jQuery事件の泡が立つのを阻止する。
jQueryはDOMのイベントトリガに泡が発生する特性を持っています。この特性を利用すると重複コードを減らすことができます。この時はjQuery.Eventの泡が立つのを阻止します。
jQuery.Eventのドキュメントの冒頭で、jQuery.EventオブジェクトはW 3 C標準に適合するイベントオブジェクトであることが分かりました。同時にjQuery.Eventは検査対応IEのステップを免除しました。jQuery.Eventはイベントの泡を防ぐために非常に簡単な方法を提供します。

$("p").click(function(event){
     event.stopPropagation();
     // do something
})
しかし、この方法はライブバインディングを使用するイベントには効果がなく、より簡単な方法でイベントの泡立ちを阻止する必要がある。

$(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要素を参照していることを知っています。
イベントオブジェクトをevent.tatget属性で明確にする
イベントの泡を防ぐコードは以下の通りです。