[解決済み] ReactJS SyntheticEvent stopPropagation()は、Reactイベントでのみ動作するのですか？

質問

ReactJSコンポーネント内でevent.stopPropagation()を使用して、クリックイベントがバブルアップして、レガシーコードでJQueryでアタッチされたクリックイベントをトリガーするのを止めようとしていますが、ReactのstopPropagation()はReactでアタッチされているイベントへの伝搬だけを止めるようで、JQueryのstopPropagation()ではReactにアタッチされているイベントへの伝搬は止められないようです。

これらのイベントにまたがってstopPropagation()を動作させる方法はないでしょうか？ 私は単純な JSFiddle を使用して、これらの動作を実証しています。

/** @jsx React.DOM */
var Propagation = React.createClass({
    alert: function(){
        alert('React Alert');
    },
    stopPropagation: function(e){
        e.stopPropagation();
    },
    render: function(){
        return (
            <div>
                <div onClick={this.alert}>
                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a>
                </div>
                <div className="alert">
                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a>
                </div>
                <div onClick={this.alert}>
                    <a href="#" className="stop-propagation">JQuery Stop Propagation on React Event</a>
                </div>
                <div className="alert">
                    <a href="#" className="stop-propagation">JQuery Stop Propagation on JQuery Event</a>
                </div>
            </div>
        );
    }
});

React.renderComponent(<Propagation />, document.body);

$(function(){    
    $(document).on('click', '.alert', function(e){
        alert('Jquery Alert');
    });

    $(document).on('click', '.stop-propagation', function(e){
        e.stopPropagation();
    });
});

解決方法は？

Reactでは、イベントデレゲーションにより document この例では、'click' のようなバブルイベントに対して、伝搬を止めることができないことを意味します。 stopPropagation Reactの合成イベントの伝搬は、Reactが内部で処理しているため、Reactの合成イベントの伝搬は可能です。

作業内容 JSFiddle を以下のように修正しました。

jQueryイベントのReactストッププロパゲーション

使用方法 Event.stopImmediatePropagation を使用すると、ルート上の他の (この場合は jQuery の) リスナーが呼び出されるのを防ぐことができます。IE9+とモダンブラウザでサポートされています。

stopPropagation: function(e){
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
},

• 注意：リスナーはバインドされた順番に呼び出されます。これが動作するためには、他のコード（ここではjQuery）の前にReactを初期化する必要があります。

jQuery Reactイベントでの伝搬を停止する

jQueryのコードでもイベントデリゲーションが使われていますが、これはつまり stopPropagation に伝播しているので、ハンドラ内のイベントは何も停止しません。 document で、Reactのリスナーがトリガーされます。

// Listener bound to `document`, event delegation
$(document).on('click', '.stop-propagation', function(e){
    e.stopPropagation();
});

要素外への伝播を防ぐために、リスナーは要素自体にバインドされている必要があります。

// Listener bound to `.stop-propagation`, no delegation
$('.stop-propagation').on('click', function(e){
    e.stopPropagation();
});

編集（2016/01/14）しました。 デリゲーションは必ずしもバブル化するイベントにのみ使用されることを明確にした。イベント処理の詳細については、Reactのソースに説明的なコメントがあります。 ReactBrowserEventEmitter.js .