[javascript] 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();
    });
});

답변

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

// 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();
});

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

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