ReactJS SyntheticEvent stopPropagation ()은 React 이벤트에서만 작동합니까?

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'과 같이 버블 링되는 이벤트 에 대해 단일 이벤트 리스너와 함께 이벤트 위임을 사용하므로 전파 중지가 불가능합니다. 실제 이벤트는 React에서 이벤트와 상호 작용할 때 이미 전파되었습니다. stopPropagationReact는 합성 이벤트의 전파를 내부적으로 처리하기 때문에 React의 합성 이벤트가 가능합니다.

아래 수정 사항으로 JSFiddle 작업 .

jQuery 이벤트에 대한 전파 정지 중지

Event.stopImmediatePropagation루트의 다른 (이 경우 jQuery) 리스너가 호출되지 않도록하는 데 사용하십시오 . IE9 + 및 최신 브라우저에서 지원됩니다.

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

• 주의 사항 : 리스너는 바인딩 된 순서대로 호출됩니다. 이것이 작동하려면 다른 코드 (jQuery here) 전에 React를 초기화해야합니다.

반응 이벤트에서 jQuery 중지 전파

Your jQuery code uses event delegation as well, which means calling stopPropagation in the handler is not stopping anything; the event has already propagated to document, and React's listener will be triggered.

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

To prevent propagation beyond the element, the listener must be bound to the element itself:

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

Edit (2016/01/14): Clarified that delegation is necessarily only used for events that bubble. For more details on event handling, React's source has descriptive comments: ReactBrowserEventEmitter.js.

---

I ran into this problem yesterday, so I created a React-friendly solution.

Check out react-native-listener. It's working very well so far. Feedback appreciated.

---

I was able to resolve this by adding the following to my component:

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

---

It is still one intersting moment:

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

Use this construction, if your function is wrapped by tag

---

Worth noting (from this issue) that if you're attaching events to document, e.stopPropagation() isn't going to help. As a workaround, you can use window.addEventListener() instead of document.addEventListener, then event.stopPropagation() will stop event from propagating to the window.

---

Update: You can now <Elem onClick={ proxy => proxy.stopPropagation() } />

---

From the React documentation: The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture. (emphasis added)

If you have a click event listener in your React code and you don't want it to bubble up, I think what you want to do is use onClickCapture instead of onClick. Then you would pass the event to the handler and do event.nativeEvent.stopPropagation() to keep the native event from bubbling up to a vanilla JS event listener (or anything that's not react).

참고URL : https://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events