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、この例の「クリック」のようにバブルするイベントに対して単一のイベントリスナーがオンになっているイベント委譲を使用します。つまり、伝播を停止することはできません。実際のイベントは、Reactで操作するまでにすでに伝播しています。stopPropagationReactは合成イベントの伝搬を内部で処理するため、Reactの合成イベントが可能です。

ワーキングJSFiddle以下の不具合を修正しています。

jQueryイベントの伝播停止の反応

Event.stopImmediatePropagationルート上の他の（この場合はjQuery）リスナーが呼び出されないようにするために使用します。IE9 +および最新のブラウザーでサポートされています。

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

• 警告：リスナーは、バインドされている順に呼び出されます。これが機能するには、他のコード（ここではjQuery）の前にReactを初期化する必要があります。

ReactイベントでのjQueryの伝播停止

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があります。

（この問題から）イベントにをアタッチするdocument場合e.stopPropagation()は役に立たないことに注意してください。回避策として、のwindow.addEventListener()代わりにを使用するとdocument.addEventListener、event.stopPropagation()イベントがウィンドウに伝達されなくなります。

それはまだ一つの興味深い瞬間です：

ev.preventDefault()
ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();

関数がタグでラップされている場合は、この構造を使用します

これを私のコンポーネントに追加することでこれを解決することができました：

componentDidMount() {
  ReactDOM.findDOMNode(this).addEventListener('click', (event) => {
    event.stopPropagation();
  }, false);
}

昨日この問題に遭遇したため、Reactに適したソリューションを作成しました。

react-native-listenerをチェックしてください。これまでのところ非常にうまく機能しています。フィードバックを歓迎します。

Reactのドキュメントから：以下のイベントハンドラーは、バブリングフェーズのイベントによってトリガーされます。キャプチャフェーズのイベントハンドラーを登録するには、Captureを追加します。（強調を追加）

Reactコードにクリックイベントリスナーがあり、それをバブルアップさせたくない場合は、のonClickCapture代わりにを使用することをお勧めしますonClick。次に、イベントをハンドラーに渡し、event.nativeEvent.stopPropagation()ネイティブイベントがバニラJSイベントリスナー（または反応しないもの）にバブリングしないようにします。

更新：今することができます <Elem onClick={ proxy => proxy.stopPropagation() } />

window.addEventListener代わりにを使用すると、簡単な回避策が得られdocument.addEventListenerます。