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

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

React 내에서 event.stopPropagation()을 사용하려고 합니다.클릭 이벤트가 기존 코드에서 JQuery와 연결된 클릭 이벤트가 버블업 및 트리거되지 않도록 하는 JS 구성 요소. 그러나 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이 예의 '클릭'과 같이 버블이 발생하는 이벤트의 경우, 즉 전파를 중지할 수 없습니다. 실제 이벤트는 반응에서 해당 이벤트와 상호 작용할 때까지 이미 전파되었습니다. stopPropagationon React의 합성 이벤트는 React가 내부적으로 합성 이벤트의 전파를 처리하기 때문에 가능합니다.

JSFiddle은 아래의 수정사항을 사용하여 작업합니다.

jQuery 이벤트에서의 리액트 중지 전파

루트에 있는 다른 청취자(이 경우 jQuery)가 호출되지 않도록 하기 위해 사용합니다.IE9+ 및 최신 브라우저에서 지원됩니다.

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

• 주의: 청취자는 바인딩된 순서대로 호출됩니다.리액트가 동작하려면 다른 코드(여기서는 jQuery)보다 먼저 리액트를 초기화해야 합니다.

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

jQuery 코드도 이벤트 위임을 사용합니다.즉, 호출을 의미합니다.stopPropagation핸들러에서는 아무것도 정지하지 않습니다.이벤트는 이미 로 전파되어 있습니다.documentReact 청취자가 트리거됩니다.

// 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의 소스에 설명이 있습니다.ReactBrowserEventEmiter.js.

여전히 흥미로운 순간입니다.

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

함수가 태그로 둘러싸인 경우 이 구성을 사용합니다.

(이 문제에서) 이벤트를 첨부할 경우 주의할 필요가 있습니다.document,e.stopPropagation()도움이 안 될 거야회피책으로서window.addEventListener()document.addEventListener , , , 「 」event.stopPropagation()이벤트가 창으로 전파되지 않도록 합니다.

React 문서에서 다음 내용을 참조하십시오.다음 이벤트 핸들러는 버블링 단계의 이벤트에 의해 트리거됩니다.캡처 단계에 이벤트 핸들러를 등록하려면 Capture를 추가합니다.(추가)

하고 에는 ' 리스너'를 사용하는 이 좋다고 생각합니다.onClickCaptureonClick하고 을 실행합니다event.nativeEvent.stopPropagation()네이티브 이벤트가 바닐라 JS 이벤트 청취자(또는 반응하지 않는 모든 것)에게 버블링되는 것을 방지합니다.

컴포넌트에 다음 항목을 추가하여 이 문제를 해결할 수 있었습니다.

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

의 딜러에게 반응시킵니다.rootdocument문제를 해결할 수 있습니다.자세한 것은 이쪽.내 블로그도 참조할 수 있어.

어제 이 문제에 부딪혔기 때문에 리액트 프렌들리 솔루션을 만들었습니다.

반응 원어민 청취기를 확인해 보세요.지금까지는 아주 잘 되고 있어요.피드백 감사합니다.

으로는 「 」를 사용하는 것이 .window.addEventListenerdocument.addEventListener.

이제 "이렇게 하면 : "<Elem onClick={ proxy => proxy.stopPropagation() } />

이 문제를 해결하려면 콜백에 if 문을 추가하여 콜백에 if 문을 추가하여event.target이 내가, .

// Callback from my own app
function exitResultsScreen(event){
        // Check element by ID
        if (event.target.className !== sass.div__search_screen){return} 
        
       // Executed only when the right elements calls
        setShowResults(false)
}

같은 에는 ★★★★★★★★★★★★★★★★★★★★★★★.e.stopPropagation()가 앓아서 못 요.onChange, 부모onClick다른 Stack Overflow 답변에서 통찰력을 얻었다.

변경 이벤트와 클릭 이벤트는 서로 다른 이벤트입니다.

★★★★★★★★★★★★★★★」e.stopPropagation() onChange해도 끄떡없다onClick.

onChange 또는 onClick을 모두 사용할 수 있는 솔루션.

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